/* yl-base.css — 源力设计系统：兜底通用组件(menu/operation/sidebar 等未被单独拆分的组件)。作用域 .yl-app。 */
.yl-app .btn:disabled, .yl-app .btn.disabled, .yl-app .slider.disabled {cursor: not-allowed; pointer-events: none;}
.yl-app .cascader-search-input {border: 0; outline: 0; width: 100%; background: transparent; font: inherit; color: var(--color-text-primary, var(--color-text-1));}
.yl-app .cascader-item-label {flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.yl-app .checkbox-box {display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: none; border-radius: 2px; background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3); flex-shrink: 0; transition: background 150ms ease, box-shadow 150ms ease;}
.yl-app .checkbox.checked .checkbox-box, .yl-app .checkbox.indeterminate .checkbox-box {background: var(--primary-6); box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 0 0 1px var(--primary-6);}
.yl-app .checkbox-icon, .yl-app .badge-dot.badge-large {width: 10px; height: 10px;}
.yl-app .checkbox-dash {display: block; width: 8px; height: 2px; background: var(--color-white); border-radius: 1px;}
.yl-app .checkbox:hover .checkbox-box {box-shadow: 0 0 0 1px var(--primary-6);}
.yl-app .checkbox.checked:hover .checkbox-box, .yl-app .checkbox.indeterminate:hover .checkbox-box {box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 0 0 1px var(--primary-6);}
.yl-app .checkbox.disabled, .yl-app .switch.disabled {opacity: 0.6; cursor: not-allowed; pointer-events: none;}
.yl-app .checkbox.invalid .checkbox-box {box-shadow: 0 0 0 1px var(--danger-5);}
.yl-app .checkbox-group-horizontal {flex-direction: row; gap: var(--space-6); align-items: center;}
.yl-app .checkbox-group-vertical {flex-direction: column; gap: var(--space-4); align-items: flex-start;}
.yl-app .desc-label, .yl-app .badge-icon-skip {color: var(--grey-4);}
.yl-app .descriptions-label-left .descriptions-list, .yl-app .descriptions-label-right .descriptions-list {gap: 22px;}
.yl-app .descriptions-label-right .desc-label, .yl-app .data-table.pbx-list-table .pbx-status-col {text-align: right;}
.yl-app .ui-input {box-sizing: border-box; width: 100%; height: 32px; padding: 0 12px; border: none; border-radius: var(--radius-sm); outline: none; background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); color: var(--color-text-1); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); transition: box-shadow 150ms ease, background-color 150ms ease;}
.yl-app .ui-input::placeholder, .yl-app .ui-textarea::placeholder, .yl-app .input-labeled .input-value-part input::placeholder, .yl-app .select-placeholder, .yl-app .ved-input input::placeholder, .yl-app .vc-search-box input::placeholder, .yl-app .nav-search input::placeholder, .yl-app .form-input::placeholder, .yl-app .searchable-select .ss-trigger::placeholder, .yl-app .searchable-select .ss-trigger.is-empty {color: var(--color-text-3);}
.yl-app .ui-input:focus, .yl-app .ui-textarea:focus, .yl-app .ui-select:focus, .yl-app .ui-input.active, .yl-app .select.focus .select-trigger, .yl-app .filter-input:focus {box-shadow: 0 0 0 1px var(--primary-6), 0 1px 1px rgba(0,0,0,0.05), 0 0 0 3px rgba(22,100,255,0.3);}
.yl-app .ui-input.input-error, .yl-app .ui-input.input-error.active, .yl-app .ui-input.input-error:focus, .yl-app .select.error.focus .select-trigger {box-shadow: 0 0 0 1px var(--danger-5), 0 1px 1px rgba(0,0,0,0.05), 0 0 0 3px rgba(245,63,63,0.12);}
.yl-app .ui-input.input-success {box-shadow: 0 0 0 1px var(--success-6), 0 1px 1px rgba(0,0,0,0.05);}
.yl-app .ui-input:disabled, .yl-app .ui-input.disabled, .yl-app .form-field.is-disabled .form-input {background-color: var(--color-bg-4); color: var(--text-yuanliNeutral-5); cursor: not-allowed;}
.yl-app .ui-textarea {box-sizing: border-box; width: 100%; min-height: 72px; padding: 8px 12px; border: none; border-radius: var(--radius-sm); outline: none; background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); color: var(--color-text-1); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); resize: vertical; transition: box-shadow 150ms ease, background-color 150ms ease;}
.yl-app .ui-select {box-sizing: border-box; width: 100%; height: 32px; padding: 0 32px 0 12px; border: none; border-radius: var(--radius-sm); outline: none; background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); color: var(--color-text-1); font-size: var(--font-size-lead); line-height: var(--line-height-h4); appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23737A87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: box-shadow 150ms ease;}
.yl-app .radio-group, .yl-app .permission-checkboxes {display: flex; flex-direction: column; gap: var(--space-3);}
.yl-app .password-manual-input, .yl-app .vc-radio input[type="radio"], .yl-app .progress-mini .progress-text, .yl-app .tree-node.collapsed > ul.children, .yl-app .mobile-only, .staff-form-page .mobile-only, .yl-app .serial-actions-row, .staff-form-page .serial-actions-row, .yl-app .tab-content>.tab-pane, .yl-app .collapse:not(.show), .yl-app .menu-item.collapsed > .children, .yl-app .service-header::after, .yl-app .loading, .yl-app .searchable-select.has-value::before, #sidebar.collapsed .sidebar-header h3, #sidebar.collapsed .menu-text, #sidebar.collapsed .sidebar-footer span, .admin-sidebar .nav-link.active::before, .header-tabs::-webkit-scrollbar, .vc-modal-mask .popconfirm-arrow, .yl-app .vc-perm-children.is-collapsed, .yl-app .filter-bar--task .search-field-clear {display: none;}
.yl-app .checkbox-group {display: flex; flex-wrap: wrap; gap: var(--space-4);}
.yl-app .switch-slider {width: 36px; height: 20px; background: var(--color-border-3); border-radius: 10px; position: relative; transition: background 200ms ease;}
.yl-app .switch-slider::after {content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--color-white); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 200ms ease;}
.yl-app .switch input:checked + .switch-slider, .yl-app .progress-normal .progress-fill, .yl-app .slider-mark.active, .yl-app .tabs-line .tab-item.active::after, .yl-app .toggle-switch.active, .yl-app .sub-tab-item.active::after {background: var(--primary-6);}
.yl-app .switch input:checked + .switch-slider::after, .yl-app .toggle-switch.active::after {transform: translateX(16px);}
.yl-app .ui-input {box-sizing: border-box; width: 240px; padding: 0 12px; border: none; border-radius: var(--radius-sm); outline: none; background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0, 0, 0, 0.05); color: var(--color-text-1); font-weight: var(--font-weight-regular); transition: box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;}
.yl-app .input-lg {height: 36px; font-size: var(--font-size-h4); line-height: var(--line-height-h4);}
.yl-app .input-md {height: 32px; font-size: var(--font-size-lead); line-height: var(--line-height-h4);}
.yl-app .input-sm {height: 28px; font-size: var(--font-size-lead); line-height: var(--line-height-body);}
.yl-app .ui-input.hover, .yl-app .ui-input:hover:not(:focus):not(.active):not(.disabled):not(:disabled):not(.input-error):not(.readonly), .yl-app .pagesize-select:hover, .yl-app .jump-input:hover, .yl-app .select.hover .select-trigger, .yl-app .select:hover:not(.focus):not(.disabled):not(.error):not(.readonly) .select-trigger, .yl-app .filter-icon-btn:hover {box-shadow: 0 0 0 1px rgba(22, 100, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.05);}
.yl-app .ui-input.input-error, .yl-app .ui-input.input-error.hover, .yl-app .ui-input.input-error:hover:not(:focus):not(.active), .yl-app .select.error .select-trigger, .yl-app .select.error.hover .select-trigger, .yl-app .select.error:hover:not(.focus) .select-trigger {box-shadow: 0 0 0 1px var(--danger-5), 0 1px 1px rgba(0, 0, 0, 0.05);}
.yl-app .ui-input.disabled::placeholder, .yl-app .ui-input:disabled::placeholder, .yl-app .input-labeled.disabled .input-value-part input::placeholder, .yl-app .select.disabled .select-value, .yl-app .select.disabled .select-placeholder, .yl-app .select.disabled .select-suffix, .yl-app .select-labeled.disabled .select-value-part .select-text, .yl-app .select-labeled.disabled .select-value-part .select-icon, .yl-app .timepicker.disabled .timepicker-placeholder, .yl-app .page-arrow.disabled, .yl-app .timepicker.disabled .timepicker-value, .yl-app .timepicker.disabled .timepicker-suffix {color: var(--text-yuanliNeutral-5);}
.yl-app .ui-input.readonly, .yl-app .ui-input[readonly] {background-color: var(--color-bg-4); color: var(--color-text-1); cursor: default;}
.yl-app .input-error-msg, .yl-app .select-error-msg {margin-top: var(--space-1); font-size: var(--font-size-body); line-height: var(--line-height-caption); color: var(--danger-5);}
.yl-app .ui-input.input-prefix {padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%23737A87' stroke-width='1.2'/%3E%3Cpath d='M9.5 9.5L12 12' stroke='%23737A87' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center;}
.yl-app .ui-input.input-suffix {padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5L7 9L11 5' stroke='%2342464E' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center;}
.yl-app .ui-input.input-prefix.input-suffix {padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%23737A87' stroke-width='1.2'/%3E%3Cpath d='M9.5 9.5L12 12' stroke='%23737A87' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5L7 9L11 5' stroke='%2342464E' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 12px center, right 12px center;}
.yl-app .input-labeled, .yl-app .select-labeled {display: flex; align-items: center; width: 240px; border: none; box-shadow: none; background: transparent;}
.yl-app .input-labeled .input-label-part, .yl-app .select-labeled .select-label-part {display: inline-flex; flex-shrink: 0; align-items: center; align-self: stretch; border: 1px solid var(--color-border-3); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--color-white); padding: 0 12px; font-size: var(--font-size-lead); line-height: var(--line-height-h4); color: var(--color-text-2); white-space: nowrap;}
.yl-app .input-labeled .input-value-part {display: flex; flex: 1; align-items: center; align-self: stretch; border: 1px solid var(--color-border-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-white); padding: 0 12px; overflow: hidden;}
.yl-app .input-labeled-large, .yl-app .select-labeled-large {height: 36px;}
.yl-app .input-labeled-large .input-label-part, .yl-app .input-labeled-large .input-value-part, .yl-app .select-labeled-large .select-label-part, .yl-app .select-labeled-large .select-value-part {padding: 7px 12px;}
.yl-app .input-labeled-default, .yl-app .select-labeled-default {height: 32px;}
.yl-app .input-labeled-default .input-label-part, .yl-app .input-labeled-default .input-value-part, .yl-app .select-labeled-default .select-label-part, .yl-app .select-labeled-default .select-value-part {padding: 5px 12px;}
.yl-app .input-labeled-small, .yl-app .select-labeled-small {height: 28px;}
.yl-app .input-labeled-small .input-label-part, .yl-app .input-labeled-small .input-value-part, .yl-app .select-labeled-small .select-label-part, .yl-app .select-labeled-small .select-value-part {padding: 3px 12px;}
.yl-app .input-labeled-mini, .yl-app .select-labeled-mini {height: 24px;}
.yl-app .input-labeled-mini .input-label-part, .yl-app .select-labeled-mini .select-label-part {padding: 1px 12px;}
.yl-app .input-labeled-mini .input-value-part, .yl-app .select-labeled-mini .select-value-part {padding: 2px 12px;}
.yl-app .input-labeled.hover .input-value-part, .yl-app .input-labeled:hover:not(.disabled) .input-value-part, .yl-app .input-labeled.hover .input-label-part, .yl-app .input-labeled:hover:not(.disabled) .input-label-part, .yl-app .select-labeled.hover .select-value-part, .yl-app .select-labeled:hover:not(.disabled) .select-value-part, .yl-app .select-labeled.hover .select-label-part, .yl-app .select-labeled:hover:not(.disabled) .select-label-part, .yl-app .timepicker.hover .timepicker-input, .yl-app .timepicker:hover:not(.focus):not(.disabled):not(.error) .timepicker-input, .yl-app .page-item:hover:not(.active):not(.disabled), .yl-app .pagination .page-link:hover {border-color: rgba(22, 100, 255, 0.8);}
.yl-app .input-labeled.focus .input-value-part, .yl-app .input-labeled:focus-within .input-value-part, .yl-app .select-labeled.focus .select-value-part {border-color: var(--primary-6); box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.3);}
.yl-app .input-labeled.focus .input-label-part, .yl-app .input-labeled:focus-within .input-label-part, .yl-app .select-labeled.focus .select-label-part {border-color: var(--primary-6);}
.yl-app .input-labeled.disabled .input-label-part, .yl-app .select-labeled.disabled .select-label-part {background: var(--color-bg-4); color: var(--text-yuanliNeutral-5);}
.yl-app .input-labeled.disabled .input-value-part, .yl-app .select-labeled.disabled .select-value-part {background: var(--color-bg-4); cursor: not-allowed;}
.yl-app .input-labeled.input-error .input-value-part, .yl-app .input-labeled.input-error .input-label-part, .yl-app .timepicker.error .timepicker-input {border-color: var(--danger-5);}
.yl-app .input-labeled.input-error.focus .input-value-part, .yl-app .input-labeled.input-error:focus-within .input-value-part {border-color: var(--danger-5); box-shadow: 0 0 0 3px rgba(245, 63, 63, 0.12);}
.yl-app .pagesize-select {position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); font-size: var(--font-size-lead); color: var(--color-text-1); cursor: pointer; white-space: nowrap; transition: box-shadow 150ms ease;}
.yl-app .pagesize-select .pagesize-arrow {width: 12px; height: 12px; color: var(--color-text-3); flex-shrink: 0;}
.yl-app .jump-input {width: 36px; height: 28px; border: none; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); text-align: center; font-size: var(--font-size-lead); color: var(--color-text-1); background: var(--color-white); outline: none; transition: box-shadow 150ms ease;}
.yl-app .jump-input:focus {box-shadow: 0 0 0 1px var(--primary-6), 0 1px 1px rgba(0,0,0,0.05), 0 0 0 3px rgba(22, 100, 255, 0.12);}
.yl-app .select-trigger {display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 12px; background: var(--color-white); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); cursor: pointer; transition: box-shadow 150ms ease;}
.yl-app .select-large .select-trigger, .yl-app .tabs-line .tab-item.tab-size-lg {height: 36px; font-size: var(--font-size-h4);}
.yl-app .select-small .select-trigger {height: 28px; padding: 0 8px;}
.yl-app .select-mini .select-trigger {height: 24px; padding: 0 4px; font-size: var(--font-size-body);}
.yl-app .select-value {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-1);}
.yl-app .select-suffix {display: flex; align-items: center; margin-left: var(--space-2); color: var(--color-text-3); flex-shrink: 0;}
.yl-app .select-arrow {width: 16px; height: 16px; transition: transform 200ms ease;}
.yl-app .select-arrow.rotated, .yl-app .searchable-select .ss-toggle.is-open i, #sidebar.collapsed .sidebar-toggle i, .nav-link[aria-expanded="true"] > .collapse-control, .header-dropdown-toggle.show i, .yl-app .filter-dropdown.open .fd-arrow {transform: rotate(180deg);}
.yl-app .select-clear {display: flex; align-items: center; width: 16px; height: 16px; color: var(--color-text-3); cursor: pointer; margin-left: var(--space-1);}
.yl-app .select-clear:hover, .yl-app .alert-close:hover, .yl-app .breadcrumb-item.current:hover, .yl-app .page-arrow, .yl-app .status-tag-text.status-tag-stop, .yl-app .page-header-breadcrumb-item.current:hover {color: var(--color-text-2);}
.yl-app .select.focus .select-suffix, .yl-app .tabs-button .tab-item:hover:not(.active):not([disabled]), .yl-app .breadcrumb-item:hover, .yl-app .copy-btn:hover, .yl-app .menu-item.active .menu-text, .yl-app .nav-link:hover, .yl-app .desc-value .edit-icon:hover, .yl-app .info-value-icon:hover, .yl-app .menu-sub-item.active .menu-text, .yl-app .searchable-select .ss-toggle:hover, .yl-app .badge-icon-awaiting, .yl-app .status-tag-text.status-tag-processing, .yl-app .tabs-card .tab-item:hover:not(.active):not([disabled]), .yl-app .page-header-breadcrumb-item:hover, .yl-app .page-header-btn-icon:hover svg, .yl-app .page-header-tab:hover:not(.active), .yl-app .popconfirm-icon-info {color: var(--primary-6);}
.yl-app .select.disabled .select-trigger {background: var(--color-bg-4); cursor: not-allowed; box-shadow: 0 0 0 1px var(--color-border-3);}
.yl-app .select.disabled:hover .select-trigger, .yl-app .select.readonly:hover .select-trigger {box-shadow: 0 0 0 1px var(--color-border-3);}
.yl-app .select.readonly .select-trigger {background: var(--color-bg-4); cursor: default; box-shadow: 0 0 0 1px var(--color-border-3);}
.yl-app .select.readonly .select-value, .yl-app .select-tag-close:hover, .yl-app .select-labeled .select-value-part .select-text.filled, .yl-app .vc-tabs a:hover, .yl-app .vc-tabs button:hover, .yl-app .desc-value, .yl-app .vc-section-title {color: var(--color-text-1);}
.yl-app .select-dropdown {position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: var(--color-white); border-radius: var(--radius-sm); box-shadow: 0px 15px 35px -2px rgba(0,0,0,0.05), 0px 5px 15px rgba(0,0,0,0.05); border: 1px solid var(--color-border-2); padding: 5px; z-index: 1000; display: none;}
.yl-app .select.focus .select-dropdown, body > .dropdown-menu.show, .yl-app .tree-root.expanded > .tree-node-body, .yl-app .checkbox.checked svg, .yl-app .is-invalid~.invalid-feedback, .yl-app .tab-content>.active, .yl-app .dropdown-menu.show, .yl-app .course-search-dropdown.show, .yl-app #recruitmentTeacherSuggestions.show, .yl-app .company-extra-info, #sidebar-overlay.show {display: block;}
.yl-app .select-option {display: flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-sm); color: var(--color-text-1); font-size: var(--font-size-lead); line-height: var(--line-height-h4); cursor: pointer; transition: background 100ms ease;}
.yl-app .select-option + .select-option {margin-top: 4px;}
.yl-app .select-option:hover, .yl-app .spec-table tr:hover td, .yl-app .number-input .num-btn:hover {background: var(--color-bg-4);}
.yl-app .select-option.selected, .yl-app .tabs-line .tab-item.active {color: var(--primary-6); font-weight: var(--font-weight-medium);}
.yl-app .select-option.disabled {color: var(--color-text-4); cursor: not-allowed;}
.yl-app .select-option.disabled:hover, .yl-app .tree-node-header.no-children, .yl-app .tab-body::-webkit-scrollbar-track, .header-dropdown-menu::-webkit-scrollbar-track, .yl-app .list-card:hover, .yl-app .page-header-tabs-list::-webkit-scrollbar-track, .yl-app .yl-list-table-wrap::-webkit-scrollbar-track, .yl-app .table-responsive::-webkit-scrollbar-track, .vc-modal-mask.centered-clear {background: transparent;}
.yl-app .select-option-check {width: 16px; height: 16px; margin-left: auto; color: var(--primary-6); flex-shrink: 0;}
.yl-app .select-group-title {padding: 5px 12px 2px; font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-3); font-weight: var(--font-weight-medium);}
.yl-app .select-empty {display: flex; align-items: center; justify-content: center; height: 64px; color: var(--text-disabled); font-size: var(--font-size-lead);}
.yl-app .select-tags {display: flex; align-items: center; gap: var(--space-1); flex: 1; overflow: hidden;}
.yl-app .select-tag {display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 8px; background: var(--color-bg-4); border-radius: 2px; font-size: var(--font-size-body); line-height: var(--line-height-h4); color: var(--color-text-2); white-space: nowrap; max-width: 120px;}
.yl-app .select-tag-text, .yl-app .pilots-container .list-col-name .name-text, .yl-app .teachers-container .list-col-name .name-text, .yl-app .teacher-col:not(.teacher-col-actions), .yl-app .teacher-col-name .name-text {overflow: hidden; text-overflow: ellipsis;}
.yl-app .select-tag-close {width: 12px; height: 12px; color: var(--color-text-3); cursor: pointer; flex-shrink: 0;}
.yl-app .select-tag-count {display: inline-flex; align-items: center; height: 22px; padding: 0 6px; background: var(--color-border-2); border-radius: 2px; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-2);}
.yl-app .select-checkbox {width: 14px; height: 14px; border: 1px solid var(--color-border-3); border-radius: 2px; margin-right: var(--space-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.yl-app .select-checkbox.checked, .yl-app .switch.checked {background: var(--primary-6); border-color: var(--primary-6);}
.yl-app .select-labeled .select-value-part {display: flex; flex: 1; align-items: center; align-self: stretch; gap: var(--space-1); border: 1px solid var(--color-border-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-white); padding: 0 12px; overflow: hidden;}
.yl-app .select-labeled .select-value-part .select-text {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-lead); line-height: var(--line-height-h4); color: var(--color-text-3);}
.yl-app .select-labeled .select-value-part .select-icon {flex-shrink: 0; width: 12px; height: 12px; color: var(--color-text-3);}
.yl-app .switch-md {width: 36px; height: 20px;}
.yl-app .switch-sm {width: 28px; height: 16px;}
.yl-app .switch-knob {position: absolute; top: 50%; left: 2px; transform: translateY(-50%); background: var(--color-white); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: left 200ms ease;}
.yl-app .switch-md .switch-knob, .yl-app .breadcrumb-lg .breadcrumb-icon, .yl-app .badge-number.badge-large, .yl-app .badge-icon.badge-small, .yl-app .badge-avatar-mini .badge-avatar, .yl-app .chart-card-expand svg {width: 16px; height: 16px;}
.yl-app .switch-sm .switch-knob, .yl-app .page-icon, .yl-app .badge-number.badge-small, .vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon svg {width: 12px; height: 12px;}
.yl-app .switch-md.checked .switch-knob {left: 18px;}
.yl-app .switch-sm.checked .switch-knob {left: 14px;}
.yl-app .switch:hover:not(.disabled):not(.loading) {background: var(--grey-3); border-color: var(--grey-3);}
.yl-app .switch.checked:hover:not(.disabled):not(.loading) {background: var(--primary-hover); border-color: var(--primary-hover);}
.yl-app .switch.checked.disabled {background: var(--primary-disabled-bg); border-color: var(--primary-disabled-bg); opacity: 1;}
.yl-app .switch.loading, .yl-app .form-field.is-disabled .form-input, .yl-app .form-field.is-disabled .form-help, .yl-app .vc-perm-row.is-disabled input[type="checkbox"] {pointer-events: none;}
.yl-app .switch.loading .switch-knob::after {content: ""; position: absolute; inset: 2px; border: 2px solid transparent; border-top-color: var(--primary-6); border-radius: 50%; animation: switch-spin 0.6s linear infinite;}
@keyframes switch-spin {
to {transform: rotate(360deg);}
}
;

.yl-app .btn-text:disabled, .yl-app .tabs-button .tab-item[disabled], .yl-app .othertabs-item:disabled, .yl-app .tabs-capsule .tab-item[disabled], .yl-app .tabs-card .tab-item[disabled] {opacity: 0.4; cursor: not-allowed;}
.yl-app .ved-select-trigger {display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; background: var(--color-white); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); cursor: pointer; gap: var(--space-1); font-size: var(--font-size-lead);}
.yl-app .ved-select-placeholder, .yl-app .timepicker-placeholder {color: var(--color-text-3); white-space: nowrap;}
.yl-app .ved-select-arrow {width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-3);}
.yl-app .ved-input {display: inline-flex; align-items: center; height: 28px; padding: 0 8px; background: var(--color-white); border: none; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border-3), 0 1px 1px rgba(0,0,0,0.05); gap: 6px; width: 200px;}
.yl-app .ved-input-prefix {display: flex; align-items: center; color: var(--color-text-3); flex-shrink: 0;}
.yl-app .ved-input-prefix svg, .yl-app .breadcrumb-md .breadcrumb-icon, .yl-app .desc-value .edit-icon svg, .yl-app .status-tag-icon svg, .yl-app .page-header-tag-icon svg, .yl-app .chart-card-title .info-icon svg {width: 14px; height: 14px;}
.yl-app .th-checkbox {width: 40px;}
.yl-app .tabs-button {display: inline-flex; align-items: center; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); background: var(--color-bg-4); padding: 2px; gap: 0; width: fit-content;}
.yl-app .tabs-button .tab-item {padding: 4px 14px; border: none; border-radius: 3px; background: transparent; color: var(--color-text-2); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); cursor: pointer; transition: all 150ms ease; white-space: nowrap;}
.yl-app .tabs-button .tab-item.active {background: var(--color-white); color: var(--primary-6); font-weight: var(--font-weight-medium); box-shadow: 0px 1px 2px rgba(0,0,0,0.07), 0px 0.5px 1px rgba(0,0,0,0.05);}
.yl-app .timepicker-input {display: inline-flex; align-items: center; width: 100%; background: var(--color-white); border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); font-weight: var(--font-weight-regular); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease;}
.yl-app .timepicker-lg .timepicker-input {height: 36px; padding: 0 12px; font-size: var(--font-size-h4);}
.yl-app .timepicker-md .timepicker-input {height: 32px; padding: 0 12px; font-size: var(--font-size-lead);}
.yl-app .timepicker-sm .timepicker-input, .yl-app .btn-sm, .yl-app .vc-btn--sm {height: 28px; padding: 0 12px; font-size: var(--font-size-lead);}
.yl-app .timepicker.focus .timepicker-input {border-color: var(--primary-6); box-shadow: 0 0 0 2px rgba(22, 100, 255, 0.1);}
.yl-app .timepicker.disabled .timepicker-input {background: var(--color-bg-4); border-color: var(--color-border-3); cursor: not-allowed;}
.yl-app .timepicker-range .timepicker-input {min-width: 240px;}
.yl-app .search-input {border: none; outline: none; background: transparent; font-size: var(--font-size-lead); color: var(--text-1); width: 180px; font-family: inherit; font-weight: var(--font-weight-regular);}
.yl-app .search-input::placeholder, .yl-app .filter-input::placeholder {color: var(--text-3);}
.yl-app .worker-stat-label {font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-3); font-weight: var(--font-weight-regular);}
.yl-app .vc-stat-label {font-size: var(--font-size-body, 12px); color: var(--color-on-surface-variant, #86909c); margin-bottom: 2px;}
.yl-app .tree-toggle-placeholder {width: 20px; height: 20px; flex: 0 0 20px; display: inline-block;}
.yl-app .perm-target-label {color: var(--color-on-surface-variant);}
.yl-app .vc-tabs a, .yl-app .vc-tabs button {padding: 10px 20px; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(150ms); display: flex; align-items: center; gap: var(--space-2); background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; white-space: nowrap;}
.yl-app .vc-tabs a.is-active, .yl-app .vc-tabs button.is-active, .yl-app .spec-tab.active {color: var(--color-primary); border-bottom-color: var(--color-primary);}
.yl-app .vc-form-label {font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-2); margin-bottom: var(--space-1);}
.yl-app .vc-form-select, .yl-app .vc-select {border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 12px; font-size: var(--font-size-body); color: var(--color-text-1); background: var(--color-bg-1); width: 100%; outline: none; cursor: pointer; transition: border-color var(150ms); box-sizing: border-box;}
.yl-app .vc-form-select:focus, .yl-app .vc-select:focus, .yl-app .vc-search-box:focus-within {border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--state-focus);}
.yl-app .vc-radio-row {display: flex; gap: var(--space-4); flex-wrap: wrap;}
.yl-app .vc-radio {display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-body); color: var(--color-text-2); transition: all var(150ms);}
.yl-app .vc-radio:hover, .yl-app .tab-btn:hover:not(.active) {border-color: var(--color-primary); color: var(--color-primary);}
.yl-app .vc-radio.is-checked {border-color: var(--color-primary); background: var(--color-primary-tag-bg); color: var(--color-primary); font-weight: var(--font-weight-medium);}
.yl-app .filter-group .filter-label {font-size: var(--font-size-body, 12px); color: var(--color-text-3, #86909c); white-space: nowrap;}
.yl-app .table-wrapper {width: 100%; overflow-x: auto; border: 1px solid var(--color-table-border); border-radius: var(--radius-md);}
.yl-app .td-user {display: table-cell; vertical-align: middle;}
.yl-app .td-user > * {display: inline-flex; vertical-align: middle; margin-right: var(--space-2);}
.yl-app .td-user > *:last-child, .yl-app td.table-actions > *:last-child, .yl-app .tabs-line .tab-item:last-child, .yl-app .table-actions > *:last-child, .yl-app .sub-tab-item:last-child, .yl-app .table-action-link:last-child, #sidebar.collapsed .nav-link i, .admin-sidebar.collapsed .has-submenu > .nav-link > i:first-child {margin-right: 0;}
.yl-app .td-mono {font-family: "SF Mono", "Menlo", monospace; font-size: var(--font-size-lead);}
.yl-app td.table-actions, .yl-app th.table-actions {position: sticky; right: 0; z-index: 2;}
.yl-app td.table-actions::before, .yl-app th.table-actions::before {content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; background: linear-gradient(to right, transparent, rgba(12, 13, 14, 0.06)); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.yl-app .table-wrapper.is-scrolling td.table-actions::before, .yl-app .table-wrapper.is-scrolling th.table-actions::before, .yl-app .avatar-editable:hover .avatar-icon::after, .yl-app .photo-preview-box:hover .photo-view-btn, .yl-app .tree-node-header:hover .tree-node-actions, .yl-app .department-item:hover .actions, .yl-app .tab-content>.fade.active, .yl-app .menu-drag-handle:hover, .yl-app #clientAttachmentsModal .attachments-grid .attachment-image-container:hover .view-btn, .yl-app #attachmentsList .attachments-grid .attachment-image-container:hover .view-btn, .yl-app #attachmentsModal .attachments-grid .attachment-image-container:hover .view-btn {opacity: 1;}
.yl-app td.table-actions {display: table-cell; background: var(--color-table-cell-bg);}
.yl-app th.table-actions {background: var(--color-table-header-bg);}
.yl-app td.table-actions > *, .yl-app .table-actions > * {display: inline; margin-right: 12px;}
.yl-app .table-toolbar {display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: var(--space-3);}
.yl-app .yl-list-table-wrap {overflow-x: auto; background: transparent;}
.yl-app .data-table {width: 100%; border-collapse: collapse; font-size: var(--font-size-body, 12px); margin-bottom: 0;}
.yl-app .data-table .table-actions {white-space: nowrap; text-align: right;}
.yl-app .type-display {font-size: var(--font-size-display); line-height: var(--line-height-display); font-weight: var(--font-weight-medium);}
.yl-app .type-h1 {font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-medium);}
.yl-app .type-h2 {font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-medium);}
.yl-app .type-h3 {font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-medium);}
.yl-app .type-h4 {font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-regular);}
.yl-app .type-lead {font-size: var(--font-size-lead); line-height: var(--line-height-lead); font-weight: var(--font-weight-regular);}
.yl-app .type-body {font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-regular);}
.yl-app .type-caption {font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-regular);}
.yl-app .alert-with-desc, .yl-app .popconfirm-content {padding: 16px;}
.yl-app .alert-banner {border-radius: 0; width: 100%;}
.yl-app .alert-info, .yl-app .vc-perm-badge.is-page {background: var(--primary-1); color: var(--primary-6);}
.yl-app .alert-success {background: var(--success-1); color: var(--color-success);}
.yl-app .alert-warning {background: var(--warning-1); color: var(--color-warning);}
.yl-app .alert-error, .yl-app .status-tag-fill.status-tag-error {background: var(--danger-2); color: var(--danger-6);}
.yl-app .alert-icon {width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; margin-right: var(--space-2);}
.yl-app .alert-content, .yl-app .vc-stat-meta, .yl-app .tree-node-info, .yl-app .menu-item-details, .yl-app .detail-main {flex: 1; min-width: 0;}
.yl-app .alert-title {font-weight: var(--font-weight-medium); color: var(--color-text-1); display: block;}
.yl-app .alert-desc {display: block; margin-top: var(--space-1); font-weight: var(--font-weight-regular); color: var(--color-text-2);}
.yl-app .alert-close {position: absolute; top: 12px; right: 16px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-h3); line-height: 1; padding: 0; transition: color 150ms ease;}
.yl-app .anchor {display: flex; flex-direction: column; width: 176px; background: var(--color-white);}
.yl-app .anchor-item {display: flex; align-items: stretch; height: 32px; background: var(--color-white); text-decoration: none; cursor: pointer;}
.yl-app .anchor-item--1st, .yl-app .pagination-simple {gap: 4px;}
.yl-app .anchor-item--2nd {gap: 20px;}
.yl-app .anchor-item--3rd {gap: 36px;}
.yl-app .anchor-item__bar {width: 2px; flex-shrink: 0; background: var(--color-bg-4);}
.yl-app .anchor-item__text {flex: 1; display: flex; align-items: center; min-width: 0; padding: 8px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); color: var(--color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .anchor-item:hover .anchor-item__text {background: var(--color-bg-4); color: var(--color-text-1);}
.yl-app .anchor-item.active .anchor-item__bar {background: var(--primary-6); border-radius: 0 4px 4px 0;}
.yl-app .anchor-item.active .anchor-item__text {background: var(--color-bg-4); color: var(--primary-6); font-weight: var(--font-weight-medium);}
.yl-app .avatar-icon {display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; flex-shrink: 0; box-sizing: border-box;}
.yl-app .avatar-icon-mini {width: 16px; height: 16px; font-size: var(--font-size-body); line-height: var(--line-height-caption);}
.yl-app .avatar-icon-default {width: 20px; height: 20px; font-size: var(--font-size-body); line-height: var(--line-height-body);}
.yl-app .avatar-icon-medium {width: 24px; height: 24px; font-size: var(--font-size-body); line-height: var(--line-height-h4);}
.yl-app .avatar-icon-large {width: 40px; height: 40px; font-size: var(--font-size-h3); line-height: var(--line-height-h3);}
.yl-app .avatar-icon-red, .yl-app .page-header-tag-error {background: var(--danger-2); color: var(--danger-7);}
.yl-app .avatar-icon-beige {background: var(--warning-2); color: var(--warning-7);}
.yl-app .avatar-icon-green {background: var(--success-2); color: var(--success-7);}
.yl-app .avatar-icon-teal {background: var(--teal-2); color: var(--teal-5);}
.yl-app .avatar-icon-purple {background: var(--violet-2); color: var(--violet-8);}
.yl-app .avatar-icon-primary {background: var(--primary-2); color: var(--primary-7);}
.yl-app .avatar-icon-grey, .yl-app .modal-close:hover {background: var(--color-bg-5); color: var(--color-text-2);}
.yl-app .avatar-icon-bordered {border: 2px solid var(--color-white);}
.yl-app .avatar-icon img {width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.yl-app .avatar-capsule {background: var(--color-white); border: 1px solid var(--color-border-2); border-radius: 30px; padding: 2px 8px 2px 2px;}
.yl-app .avatar-name {color: var(--color-text-1); font-weight: var(--font-weight-regular); white-space: nowrap;}
.yl-app .avatar-default .avatar-name, .yl-app .avatar-medium .avatar-name {font-size: var(--font-size-lead); line-height: var(--line-height-h4);}
.yl-app .avatar-large .avatar-name, .yl-app .breadcrumb-lg {font-size: var(--font-size-h4); line-height: var(--line-height-h4);}
.yl-app .avatar-twoline {align-items: flex-start;}
.yl-app .avatar-twoline .avatar-info {display: flex; flex-direction: column; gap: 0;}
.yl-app .avatar-twoline .avatar-subtitle {font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-3); font-weight: var(--font-weight-regular);}
.yl-app .avatar-editable {position: relative; cursor: pointer;}
.yl-app .avatar-editable .avatar-icon::after {content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.2s;}
.yl-app .breadcrumb-item {color: var(--color-text-3); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; transition: color 0.15s; white-space: nowrap;}
.yl-app .breadcrumb-item.current, .yl-app .page-header-breadcrumb-item.current {color: var(--color-text-2); font-weight: var(--font-weight-medium); cursor: default;}
.yl-app .breadcrumb-item.disabled {color: var(--color-text-4); cursor: not-allowed; pointer-events: none;}
.yl-app .breadcrumb-separator {color: var(--color-text-3); margin: 0 4px;}
.yl-app .breadcrumb-lg .breadcrumb-separator {margin: 0 8px;}
.yl-app .breadcrumb-icon {display: inline-flex; align-items: center; margin-right: var(--space-1);}
.yl-app .btn-primary:hover, .yl-app .vc-btn--primary:hover {background: var(--primary-hover); box-shadow: var(--shadow-blue-hover);}
.yl-app .btn-primary:active, .yl-app .vc-btn--primary:active {background: var(--primary-active); box-shadow: var(--shadow-blue);}
.yl-app .btn-secondary:hover, .yl-app .btn-outline:hover {box-shadow: 0px 0px 0px 1px rgba(22,100,255,0.8), 0px 2px 1px 0px rgba(0,0,0,0.08);}
.yl-app .btn-secondary:active, .yl-app .vc-btn--secondary:active {background: var(--color-border-3); box-shadow: var(--shadow-gray);}
.yl-app .btn-outline:active, .yl-app .vc-btn--ghost:active {background: var(--grey-3); box-shadow: var(--shadow-gray);}
.yl-app .btn-text:hover, .yl-app .menu-item.active, .yl-app .menu-sub-item.active {background: rgba(22, 100, 255, 0.06);}
.yl-app .btn-text:active {background: rgba(22, 100, 255, 0.12);}
.yl-app .btn-icon:hover {background: var(--bg-4);}
.yl-app .btn-icon:active, .yl-app .segmented-picker-item:hover:not(.active):not(.disabled):not([disabled]), .yl-app .segmented-picker-item.hover, .yl-app .segmented-picker-item:hover:not(.active) {background: var(--grey-3);}
.yl-app .btn-danger:hover, .yl-app .vc-btn--danger:hover {background: var(--danger-hover);}
.yl-app .btn-danger:active, .yl-app .vc-btn--danger:active {background: var(--danger-active);}
.yl-app .btn-success:active {background: var(--success-active);}
.yl-app .btn-warning:active {background: var(--warning-active);}
.yl-app .btn-primary.disabled {background: var(--primary-disabled-bg); box-shadow: 0 0 0 1px var(--primary-disabled-bg); opacity: 0.7;}
.yl-app .btn-secondary.disabled {background: var(--bg-4); color: var(--text-disabled); box-shadow: 0 0 0 1px var(--border-1);}
.yl-app .btn-outline.disabled {background: var(--bg-white); color: var(--text-disabled); box-shadow: 0 0 0 1px var(--border-1);}
.yl-app .btn-text.disabled {color: var(--text-disabled); background: transparent;}
.yl-app .btn-danger.disabled {background: var(--danger-disabled-bg); box-shadow: 0 0 0 1px var(--danger-disabled-bg); opacity: 0.7;}
.yl-app .btn-success.disabled {background: var(--success-disabled-bg); box-shadow: 0 0 0 1px var(--success-disabled-bg); opacity: 0.7;}
.yl-app .btn-warning.disabled {background: var(--warning-disabled-bg); box-shadow: 0 0 0 1px var(--warning-disabled-bg); opacity: 0.7;}
.yl-app .btn-group .btn:first-child, .yl-app .tab-btn:first-child, .yl-app .time-btn:first-child {border-radius: 4px 0 0 4px;}
.yl-app .btn-group .btn:last-child, .yl-app .tab-btn:last-child, .yl-app .time-btn:last-child {border-radius: 0 4px 4px 0;}
.yl-app .btn-dashed:hover {background: rgba(22, 100, 255, 0.04);}
.yl-app .cascader {display: flex; width: 480px; height: 260px; overflow: hidden; border: 1px solid var(--color-border-light, var(--color-border-2)); border-radius: var(--radius-default, 4px); background: var(--color-bg-card, var(--color-white)); box-shadow: 0 15px 35px -2px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.05);}
.yl-app .cascader[data-group="true"] {width: 320px;}
.yl-app .cascader-panel {display: flex; flex: 1 0 0; flex-direction: column; gap: var(--space-1); min-width: 0; padding: 6px; background: var(--color-bg-card, var(--color-white));}
.yl-app .cascader-panel + .cascader-panel {border-left: 1px solid var(--color-border-light, var(--color-border-2));}
.yl-app .cascader-search {display: flex; align-items: center; gap: var(--space-2); height: 32px; margin-bottom: var(--space-1); padding: 0 12px; border: 1px solid var(--color-border-light, var(--color-border-2)); border-radius: var(--radius-default, 4px); color: var(--color-text-tertiary, var(--color-text-3)); font-size: var(--font-size-md, 13px); line-height: var(--line-height-h4);}
.yl-app .cascader-group-title {padding: 2px 12px; color: var(--color-text-tertiary, var(--color-text-3)); font-size: var(--font-size-sm, 12px); line-height: var(--line-height-body);}
.yl-app .cascader-item {display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 5px 12px; border: 0; border-radius: var(--radius-default, 4px); background: var(--color-bg-card, var(--color-white)); color: var(--color-text-primary, var(--color-text-1)); font-size: var(--font-size-md, 13px); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); text-align: left;}
.yl-app .cascader-item.active {background: var(--color-bg-subtle, var(--color-bg-4)); color: var(--color-primary, var(--color-primary)); font-weight: var(--font-weight-medium);}
.yl-app .cascader-item.disabled {color: var(--color-text-disabled, var(--text-yuanliNeutral-5)); cursor: not-allowed;}
.yl-app .cascader-item-arrow {color: var(--color-text-tertiary, var(--color-text-3)); font-size: var(--font-size-h4); line-height: 1;}
.yl-app .cascader-icon {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--color-text-tertiary, var(--color-text-3)); font-size: var(--font-size-body);}
.yl-app .cascader-check {display: inline-block; box-sizing: border-box; position: relative; width: 14px; height: 14px; min-width: 14px; min-height: 14px; border: 1px solid var(--color-border, var(--color-border-3)); border-radius: 2px; background: var(--color-bg-card, var(--color-white)); flex-shrink: 0;}
.yl-app .cascader-check.checked {border-color: var(--color-primary, var(--color-primary)); background: var(--color-primary, var(--color-primary));}
.yl-app .cascader-check.checked::after {content: ""; position: absolute; top: 1px; left: 4px; width: 4px; height: 7px; border: solid var(--color-white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);}
.yl-app .descriptions {display: flex; flex-direction: column; gap: var(--space-4); width: fit-content; color: var(--color-text-1);}
.yl-app .descriptions-title {margin: 0; color: var(--color-text-1); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); line-height: var(--line-height-h3); white-space: nowrap;}
.yl-app .descriptions-grid {display: grid;}
.yl-app .descriptions-grid-2 {grid-template-columns: repeat(2, minmax(216px, 1fr)); column-gap: 74px;}
.yl-app .descriptions-list, .yl-app .vc-perm-node {display: flex; flex-direction: column;}
.yl-app .descriptions-stacked .descriptions-grid, .yl-app .descriptions-inline .descriptions-grid, .yl-app .descriptions-inline-colon .descriptions-grid {row-gap: 20px;}
.yl-app .desc-item-stacked, .yl-app .form-field {display: flex; flex-direction: column; gap: var(--space-1);}
.yl-app .desc-item-horizontal {display: grid; grid-template-columns: 53px minmax(0, 200px); column-gap: 24px; align-items: start;}
.yl-app .desc-item-inline {display: flex; align-items: flex-start; gap: var(--space-2); white-space: nowrap;}
.yl-app .btn-primary:hover, .yl-app .popconfirm .btn-primary:hover {background: var(--primary-5);}
.yl-app .btn-secondary:hover {box-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(22,100,255,0.8);}
.yl-app .drawer {display: flex; flex-direction: column; background: var(--color-white); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08); overflow: hidden; border: 1px solid var(--color-border-3); border-radius: var(--radius-md);}
.yl-app .drawer-mini, .yl-app .modal-md {width: 480px;}
.yl-app .drawer-sm {width: 600px;}
.yl-app .drawer-md {width: 720px;}
.yl-app .drawer-lg {width: 100%; max-width: 1080px;}
.yl-app .drawer-header {display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--color-border-3); flex-shrink: 0;}
.yl-app .drawer-title {font-weight: var(--font-weight-medium); font-size: var(--font-size-h2); line-height: var(--line-height-h2); color: var(--color-text-1);}
.yl-app .drawer-close {font-size: var(--font-size-h1); color: var(--color-text-3); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: color 150ms ease, background 150ms ease;}
.yl-app .drawer-close:hover {color: var(--color-text-2); background: var(--color-bg-4);}
.yl-app .drawer-body {flex: 1; padding: var(--space-6); overflow-y: auto; min-height: 120px;}
.yl-app .drawer-footer {display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); height: 64px; padding: 16px 24px; border-top: 1px solid var(--color-border-3); flex-shrink: 0;}
.yl-app .form-title {font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); color: var(--color-text-1); margin-bottom: var(--space-6);}
.yl-app .form-grid-row {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);}
.yl-app .required {color: var(--danger-5); margin-left: 2px;}
.yl-app .form-help, .yl-app .worker-item .worker-remark .wm-label {font-size: var(--font-size-body); color: var(--color-text-3);}
.yl-app .form-help.is-error, .yl-app .popconfirm-icon-error {color: var(--danger-5);}
.yl-app .form-error-text {font-size: var(--font-size-body); color: var(--danger-5);}
.yl-app .form-success-text {font-size: var(--font-size-body); color: var(--success-5);}
.yl-app .form-actions {display: flex; gap: var(--space-2); margin-top: var(--space-2);}
.yl-app .form-section-title {font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); color: var(--color-text-1);}
.yl-app .divider {border: none; border-top: 1px solid var(--color-border-2); margin: 8px 0;}
.yl-app .detail-field-value {font-size: var(--font-size-lead); color: var(--color-text-1); line-height: var(--line-height-h4); font-weight: var(--font-weight-regular); word-break: break-all; overflow-wrap: anywhere;}
.yl-app .form-grid-row.cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.yl-app .detail-photo-wrapper {display: flex; flex-wrap: wrap; gap: var(--space-3);}
.yl-app .photo-preview-box {position: relative; width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border-3); background: var(--color-bg-4); cursor: pointer;}
.yl-app .photo-preview-box img {width: 100%; height: 100%; object-fit: cover; display: block;}
.yl-app .photo-preview-box.photo-empty {display: flex; align-items: center; justify-content: center; border-style: dashed; background: var(--color-bg-4);}
.yl-app .photo-view-btn {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 13, 14, 0.35); color: var(--color-white); opacity: 0; transition: opacity 150ms ease;}
.yl-app .copy-btn {cursor: pointer; color: var(--color-text-3); margin-left: var(--space-2); font-size: var(--font-size-sm); transition: color 150ms ease;}
.yl-app .copy-btn.copied, .yl-app .status-tag-text.status-tag-success {color: var(--success-6);}
.yl-app .vc-empty-hint, .yl-app .vc-loading-hint {text-align: center; padding: var(--space-10) var(--space-6); color: var(--color-text-3); font-size: var(--font-size-body);}
.yl-app .svg-icon {display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--font-size-h3); color: currentColor; vertical-align: middle; flex-shrink: 0;}
.yl-app .svg-icon svg {width: 100%; height: 100%; fill: none;}
.yl-app .message {display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; width: fit-content; max-width: 100%; box-sizing: border-box; background: var(--color-bg-container, #ffffff); border: 1px solid var(--color-border, #dde2e9); border-radius: var(--radius-default, 4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); color: var(--color-text-primary, #1f2329); font-size: var(--font-size-base, 14px); line-height: 1.5; white-space: normal; word-break: break-word;}
.yl-app .message-icon {width: 20px; height: 20px; flex-shrink: 0; fill: currentColor;}
.yl-app .message-success .message-icon {color: var(--color-success, var(--color-success));}
.yl-app .message-warning .message-icon {color: var(--color-warning, var(--color-warning));}
.yl-app .message-error .message-icon {color: var(--color-danger, var(--color-danger));}
.yl-app .message-info .message-icon {color: var(--color-primary, var(--color-primary));}
.yl-app .message-success {background: #e8f6ee; border-color: #b7e3c8;}
.yl-app .message-warning {background: #fff8e6; border-color: #ffe0a3;}
.yl-app .message-error {background: #fdeceb; border-color: #f7c5c2;}
.yl-app .message-info, .yl-app .message-loading {background: #eaf2ff; border-color: #bcd6ff;}
.yl-app .message.is-block, .yl-app .tree-view, .yl-app .operation-item-col-flight-charts .image-upload-area, .yl-app .operation-item-col-operation-photos .image-upload-area, .staff-form-page .operation-item-col-flight-charts .image-upload-area, .staff-form-page .operation-item-col-operation-photos .image-upload-area, .yl-app .image-upload-area .image-upload-container, .yl-app .kit-item-row .form-input {width: 100%;}
.yl-app .message-content {color: var(--color-text-primary, var(--color-text-1));}
.yl-app .message-content a {color: var(--color-primary, var(--color-primary)); text-decoration: none;}
.yl-app .message-close {display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: none; background: none; cursor: pointer; color: var(--color-text-secondary, var(--color-text-2)); flex-shrink: 0;}
.yl-app .message-close svg {width: 16px; height: 16px; fill: currentColor;}
.yl-app .message-loading .message-icon {animation: message-spin 1s linear infinite; color: var(--color-primary, var(--color-primary));}
@keyframes message-spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
;

.yl-app .btn-primary:hover {background: rgba(22,100,255,0.8);}
.yl-app .btn-danger:hover {background: rgba(245,63,63,0.8);}
.yl-app .page-simple-indicator {display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); font-size: var(--font-size-lead); color: var(--color-text-1); white-space: nowrap;}
.yl-app .progress-track {width: 100%; background: var(--color-bg-5); overflow: hidden;}
.yl-app .progress-fill {height: 100%; border-radius: inherit; transition: width 0.3s ease;}
.yl-app .progress-lg .progress-track {height: 8px; border-radius: var(--radius-sm);}
.yl-app .progress-lg .progress-fill {border-radius: var(--radius-sm);}
.yl-app .progress-lg .progress-text {font-size: var(--font-size-h4);}
.yl-app .progress-default .progress-track {height: 4px; border-radius: 2px;}
.yl-app .progress-default .progress-fill {border-radius: 2px;}
.yl-app .progress-default .progress-text, .yl-app .progress-sm .progress-text {font-size: var(--font-size-body);}
.yl-app .progress-sm .progress-track {height: 3px; border-radius: 1.5px;}
.yl-app .progress-sm .progress-fill {border-radius: 1.5px;}
.yl-app .progress-mini .progress-track {height: 2px; border-radius: 1px;}
.yl-app .progress-mini .progress-fill {border-radius: 1px;}
.yl-app .progress-success .progress-fill, .yl-app .status-dot-success {background: var(--color-success);}
.yl-app .progress-error .progress-fill {background: var(--danger-5);}
.yl-app .progress-warning .progress-fill {background: var(--color-warning);}
.yl-app .progress-text {flex-shrink: 0; color: var(--color-text-2); font-weight: var(--font-weight-regular); white-space: nowrap; min-width: 32px; text-align: right;}
.yl-app .segmented-picker {display: inline-flex; align-items: flex-start; gap: var(--space-2);}
.yl-app .segmented-picker-item {display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: none; border-radius: var(--radius-sm); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-3); color: var(--color-text-2); font-style: normal; font-weight: var(--font-weight-regular); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;}
.yl-app .segmented-picker-item.active {background: var(--primary-1); box-shadow: 0 1px 1px rgba(0, 110, 255, 0), 0 0 0 1px var(--primary-disabled-bg); color: var(--primary-6); font-weight: var(--font-weight-medium);}
.yl-app .segmented-picker-item.disabled, .yl-app .segmented-picker-item[disabled] {color: var(--color-text-3); opacity: 0.5; cursor: not-allowed; pointer-events: none;}
.yl-app .segmented-picker-lg .segmented-picker-item, .yl-app .segmented-picker-md .segmented-picker-item, .yl-app .segmented-picker-sm .segmented-picker-item {width: 94px; font-size: var(--font-size-lead); line-height: var(--line-height-h4);}
.yl-app .segmented-picker-lg .segmented-picker-item {min-height: 36px;}
.yl-app .segmented-picker-md .segmented-picker-item {min-height: 32px;}
.yl-app .segmented-picker-sm .segmented-picker-item {min-height: 28px;}
.yl-app .segmented-picker-xs .segmented-picker-item {width: 89px; min-height: 24px; font-size: var(--font-size-body); line-height: var(--line-height-body);}
.yl-app .sidenav {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: var(--bg-7); width: 200px; min-width: 200px; height: 852px; overflow: hidden; flex-shrink: 0;}
.yl-app .product-icon {flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.yl-app .product-name {flex-grow: 1; height: 24px; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-h3); white-space: nowrap; color: var(--text-1); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium);}
.yl-app .menu-section {display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-start; align-self: stretch; padding: 0 12px; row-gap: 4px;}
.yl-app .group-title {flex-shrink: 0; align-self: stretch; padding: 3px 12px; overflow: hidden; line-height: var(--line-height-body); color: var(--text-3); font-size: var(--font-size-body);}
.yl-app .menu-item {display: flex; flex-shrink: 0; align-items: center; align-self: stretch; column-gap: 8px; padding: 0 12px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s;}
.yl-app .menu-item.has-arrow, .yl-app .menu-item.no-icon.has-arrow {column-gap: 12px;}
.yl-app .menu-item.no-icon {column-gap: 4px;}
.yl-app .menu-item:hover, .yl-app .collapse-btn:hover, .yl-app .menu-sub-item:hover {background: rgba(0, 0, 0, 0.04);}
.yl-app .menu-icon, .yl-app .all-features-btn .btn-icon {flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;}
.yl-app .menu-icon img, .yl-app .all-features-btn .btn-icon svg, .yl-app .menu-icon svg, .yl-app .badge-icon.badge-large, .yl-app .badge-avatar-small .badge-avatar {width: 20px; height: 20px;}
.yl-app .menu-text {flex-grow: 1; height: 22px; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-h4); white-space: nowrap; color: var(--text-1); font-size: var(--font-size-lead);}
.yl-app .menu-chevron, .yl-app .all-features-btn .btn-chevron {flex-shrink: 0; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;}
.yl-app .menu-chevron svg, .yl-app .all-features-btn .btn-chevron svg, .yl-app .page-header-breadcrumb-sep svg {width: 12px; height: 12px; color: var(--text-3);}
.yl-app .all-features-btn {display: flex; flex-shrink: 0; align-items: center; align-self: stretch; column-gap: 12px; border: 1px solid var(--border-3); border-radius: var(--radius-sm); padding: 4px 11px; cursor: pointer; margin: 0 12px; transition: border-color 0.15s;}
.yl-app .all-features-btn:hover {border-color: rgba(22, 100, 255, 0.5);}
.yl-app .slider {position: relative; display: flex; align-items: center; width: 100%; height: 24px; cursor: pointer; user-select: none; box-sizing: border-box;}
.yl-app .slider-sm {height: 16px;}
.yl-app .slider-track {position: relative; width: 100%; height: 2px; background: var(--color-bg-4); border-radius: 1px;}
.yl-app .slider-track-fill {position: absolute; top: 0; left: 0; height: 100%; background: var(--primary-6); border-radius: 1px;}
.yl-app .slider-thumb {position: absolute; top: 50%; width: 12px; height: 12px; background: var(--color-white); border: 2px solid var(--primary-6); border-radius: 50%; transform: translate(-50%, -50%); transition: box-shadow 200ms ease, width 100ms ease, height 100ms ease; cursor: grab; box-sizing: border-box;}
.yl-app .slider-sm .slider-thumb {width: 8px; height: 8px;}
.yl-app .slider-thumb:hover {box-shadow: 0 0 0 4px rgba(22, 100, 255, 0.12);}
.yl-app .slider-thumb:active, .yl-app .slider-thumb.active {width: 14px; height: 14px; cursor: grabbing; box-shadow: 0 0 0 4px rgba(22, 100, 255, 0.12);}
.yl-app .slider.disabled .slider-track-fill {background: var(--primary-3);}
.yl-app .slider.disabled .slider-thumb {border-color: var(--primary-3);}
.yl-app .slider-marks {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
.yl-app .slider-mark {position: absolute; width: 4px; height: 4px; background: var(--color-border-3); border-radius: 50%; transform: translate(-50%, -50%); top: 50%;}
.yl-app .slider-mark-labels {position: absolute; top: 100%; left: 0; width: 100%; margin-top: var(--space-2);}
.yl-app .slider-mark-labels span {position: absolute; transform: translateX(-50%); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-3); white-space: nowrap;}
.yl-app .slider-tooltip {position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-text-2); color: var(--color-white); font-size: var(--font-size-body); line-height: var(--line-height-body); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;}
.yl-app .slider-tooltip::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--color-text-2);}
.yl-app .step-h {display: flex; flex-grow: 1; align-items: center; column-gap: 4px;}
.yl-app .step-h.last {flex-grow: 0; flex-shrink: 0; display: inline-flex;}
.yl-app .step-line {display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; padding-top: 10px; padding-bottom: 10px;}
.yl-app .step-line .line {height: 2px; align-self: stretch; background: var(--steps-border);}
.yl-app .step-line.done .line {background: var(--steps-primary-line);}
.yl-app .step-h-desc {display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; justify-content: center;}
.yl-app .step-h-desc.last {flex-grow: 0; flex-shrink: 0;}
.yl-app .step-h-desc .step-header {display: flex; align-items: center; align-self: stretch; column-gap: 4px;}
.yl-app .step-desc {padding: 0 24px 0 28px; line-height: var(--line-height-caption); letter-spacing: 0.2px; color: var(--steps-desc); font-size: var(--font-size-body);}
.yl-app .step-desc-last {padding: 0 0 0 28px; line-height: var(--line-height-caption); letter-spacing: 0.2px; color: var(--steps-desc); font-size: var(--font-size-body);}
.yl-app .ind {width: 24px; height: 24px; border-radius: 23px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; font-family: Roboto, "PingFang SC", sans-serif; font-size: var(--font-size-body); line-height: var(--line-height-h4); letter-spacing: 0;}
.yl-app .ind.active {border: 2px solid var(--steps-primary); background: var(--steps-primary-bg); box-shadow: var(--steps-shadow); color: var(--steps-white); font-weight: 900;}
.yl-app .ind.pending {border: 2px solid var(--steps-border); background: var(--steps-white); color: var(--steps-desc); font-weight: 800;}
.yl-app .ind.disabled {border: 2px solid var(--steps-border); background: var(--steps-disabled-bg); color: var(--steps-disabled-text); font-weight: 800;}
.yl-app .ind.error {border: 2px solid var(--steps-error); background: var(--steps-error); box-shadow: var(--steps-shadow); color: var(--steps-white); font-weight: 900;}
.yl-app .step-title {flex-shrink: 0; line-height: var(--line-height-h4); color: var(--steps-text); font-size: var(--font-size-h4); font-weight: var(--font-weight-medium);}
.yl-app .action-link {color: var(--color-table-action-primary); cursor: pointer; font-size: var(--font-size-lead); text-decoration: none;}
.yl-app .action-link:hover {opacity: 0.8;}
.yl-app .action-danger {color: var(--color-table-action-danger);}
.yl-app .avatar-sm {width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary, var(--color-primary)); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); flex-shrink: 0;}
.yl-app .toolbar-filters, .yl-app .toolbar-actions {display: flex; gap: 8px;}
.yl-app .btn:hover {opacity: 0.85;}
.yl-app .tabs-line {display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border-2); background: var(--color-white); gap: 0;}
.yl-app .tabs-line .tab-item {position: relative; color: var(--color-text-2); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); cursor: pointer; background: transparent; border: none; white-space: nowrap; transition: color 150ms ease; padding: 0; margin-right: var(--space-6); display: inline-flex; align-items: center; gap: 6px;}
.yl-app .tabs-line .tab-item.tab-size-md {height: 32px; font-size: var(--font-size-lead);}
.yl-app .tabs-line .tab-item::after, .yl-app .sub-tab-item::after {content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background 150ms ease;}
.yl-app .tabs-line .tab-item:hover:not(.active):not([disabled]), .yl-app .sub-tab-item:hover:not(.active) {color: rgba(22, 100, 255, 0.8);}
.yl-app .tabs-line .tab-item[disabled] {color: var(--text-yuanliNeutral-5); cursor: not-allowed; opacity: 0.5;}
.yl-app .tabs-line .tab-item .tab-icon {width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;}
.yl-app .tabs-line .tab-item .tab-count {color: var(--color-text-3); font-size: var(--font-size-body); margin-left: 2px;}
.yl-app .tabs-line .tab-item.active .tab-count {color: rgba(22, 100, 255, 0.6);}
.yl-app .tabs-line-scroll-wrapper {position: relative; display: flex; align-items: center;}
.yl-app .tabs-line-scroll-wrapper .scroll-btn {width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); background: var(--color-white); cursor: pointer; color: var(--color-text-2); font-size: var(--font-size-h4); flex-shrink: 0; transition: all 150ms ease;}
.yl-app .tabs-line-scroll-wrapper .scroll-btn:hover, .yl-app .tabs-extra .btn-extra:hover, .yl-app .tabs-add-btn:hover {border-color: var(--primary-6); color: var(--primary-6);}
.yl-app .tabs-line-scroll-wrapper .tabs-line-scroll {overflow: hidden; flex: 1; margin: 0 8px;}
.yl-app .tabs-capsule {display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--color-bg-5); border-radius: var(--radius-full); width: fit-content;}
.yl-app .tabs-capsule .tab-item {padding: 4px 14px; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-2); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); cursor: pointer; transition: all 150ms ease; white-space: nowrap;}
.yl-app .tabs-capsule .tab-item:hover:not(.active):not([disabled]) {color: var(--color-text-1); background: rgba(199, 204, 214, 0.25);}
.yl-app .tabs-capsule .tab-item.active {background: var(--primary-6); color: var(--primary-foreground); font-weight: var(--font-weight-medium); box-shadow: 0px 1px 3px rgba(22, 100, 255, 0.3);}
.yl-app .othertabs {display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(199, 204, 214, 0.3); border-radius: var(--radius-sm); width: fit-content;}
.yl-app .othertabs-item {padding: 2px 12px; border: none; border-radius: 2px; background: transparent; color: var(--color-text-2); font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); cursor: pointer; transition: all 0.15s;}
.yl-app .othertabs-item:hover:not(.active):not(:disabled) {background: rgba(199, 204, 214, 0.2);}
.yl-app .othertabs-item.active {background: var(--color-white); color: var(--primary-6); font-weight: var(--font-weight-medium); border-radius: var(--radius-sm); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.07), 0px 0.5px 1px 0px rgba(0,0,0,0.05), 0px 0px 0px 0.5px rgba(213,219,227,0.7);}
.yl-app .tabs-wrapper {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-2);}
.yl-app .tabs-wrapper .tabs-line {border-bottom: none; flex: 1;}
.yl-app .tabs-extra {display: flex; align-items: center; gap: var(--space-2); padding-right: 16px;}
.yl-app .tabs-add-btn {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text-2); font-size: var(--font-size-h3); cursor: pointer; transition: all 150ms ease; margin-left: var(--space-2);}
.yl-app .icon-svg {width: 14px; height: 14px; fill: currentColor;}
.yl-app .timepicker {display: inline-flex; align-items: center; position: relative;}
.yl-app .timepicker-value {color: var(--color-text-1); white-space: nowrap;}
.yl-app .timepicker-separator {color: var(--color-text-3); margin: 0 8px;}
.yl-app .timepicker-suffix {display: inline-flex; align-items: center; margin-left: auto; padding-left: 8px; color: var(--color-text-3);}
.yl-app .hamburger-btn {width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; flex-shrink: 0;}
.yl-app .hamburger-line {width: 16px; height: 2px; background: var(--text-2); border-radius: 1px;}
.yl-app .product-tabs {display: flex; align-items: center; margin-left: var(--space-8); padding-left: 24px; gap: var(--space-6); height: 100%;}
.yl-app .product-tab {font-size: var(--font-size-lead); color: var(--text-2); cursor: pointer; height: 100%; display: flex; align-items: center; position: relative; white-space: nowrap; font-weight: var(--font-weight-regular);}
.yl-app .product-tab:hover, .yl-app .menu-sub-item .menu-text {color: var(--text-1);}
.yl-app .product-tab.active {color: var(--text-1); font-weight: var(--font-weight-medium);}
.yl-app .product-tab.active::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary-6);}
.yl-app .search-box {display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--bg-4);}
.yl-app .notification-dot {position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; background: var(--color-danger); border-radius: 50%;}
.yl-app .worker-stats {display: flex; flex-wrap: wrap; align-items: stretch; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); background: var(--grey-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.yl-app .worker-stat {display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-4); min-width: 76px;}
.yl-app .worker-stat:first-child {padding-left: 0;}
.yl-app .worker-stat + .worker-stat {border-left: 1px solid var(--color-border);}
.yl-app .worker-stat-value {font-size: var(--font-size-h3); line-height: var(--line-height-h3); color: var(--color-text-1); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;}
.yl-app .worker-stat-value.is-zero, .yl-app .worker-item .worker-stat-value.is-zero {color: var(--color-text-3); font-weight: var(--font-weight-medium);}
.yl-app .worker-item {display: flex; align-items: center; flex-wrap: nowrap; padding: var(--space-2) var(--space-4); background: var(--color-bg-1); border-bottom: 1px solid var(--color-border-2); gap: var(--space-3); font-size: var(--font-size-lead); line-height: var(--line-height-h4);}
.yl-app .worker-item:hover {background: var(--grey-1);}
.yl-app .worker-item + .worker-item {border-top: none;}
.yl-app .worker-item-name {display: inline-flex; align-items: center; gap: 6px; min-width: 80px; flex-shrink: 0; font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-text-1); line-height: var(--line-height-h4);}
.yl-app .worker-item-name i {font-size: 16px; color: var(--primary-6);}
.yl-app .worker-item-aside {display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0;}
.yl-app .worker-item .worker-stats {display: inline-flex; align-items: baseline; gap: var(--space-3); margin: 0; padding: 0; background: none; border: none; border-radius: 0;}
.yl-app .worker-item .worker-stat {display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 3px; padding: 0; min-width: auto; border-left: none;}
.yl-app .worker-item .worker-stat-label {font-size: var(--font-size-lead); line-height: var(--line-height-h4); color: var(--color-text-2); white-space: nowrap;}
.yl-app .worker-item .worker-stat-value {font-size: var(--font-size-h4); line-height: var(--line-height-h4); color: var(--color-text-1); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;}
.yl-app .worker-item .worker-meta {display: inline-flex; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; flex-wrap: nowrap;}
.yl-app .worker-item .worker-meta .wm-item {display: inline-flex; align-items: baseline; gap: 3px;}
.yl-app .worker-item .worker-meta .wm-label {font-size: var(--font-size-lead); color: var(--color-text-2); line-height: var(--line-height-h4); white-space: nowrap;}
.yl-app .worker-item .worker-meta .wm-value {font-size: var(--font-size-h4); color: var(--color-text-1); font-weight: var(--font-weight-medium); line-height: var(--line-height-h4);}
.yl-app .worker-item .worker-remark {display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: none; font-size: var(--font-size-lead); color: var(--color-text-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.yl-app .worker-list-head {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3);}
.yl-app .worker-list-tools {display: inline-flex; align-items: center; gap: var(--space-2);}
.yl-app .worker-empty {padding: var(--space-6) 0; text-align: center; color: var(--color-text-3); font-size: var(--font-size-lead);}
.yl-app .action-btn {display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 12px; font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-medium); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-1); color: var(--color-text-2); cursor: pointer; box-shadow: var(--shadow-gray); transition: all 150ms ease; white-space: nowrap;}
.yl-app .action-btn:hover {box-shadow: var(--shadow-gray-hover); color: var(--color-primary); border-color: var(--color-primary);}
.yl-app .action-btn.action-edit {color: var(--color-success); border-color: var(--success-2); background: var(--color-success-bg);}
.yl-app .action-btn.action-edit:hover {color: #ffffff; background: var(--color-success); border-color: var(--color-success);}
.yl-app .action-btn.action-delete {color: var(--color-danger); border-color: var(--danger-2); background: var(--color-danger-bg);}
.yl-app .action-btn.action-delete:hover {color: #ffffff; background: var(--color-danger); border-color: var(--color-danger);}
.yl-app .vc-stats {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); padding-top: var(--space-1); margin-bottom: var(--space-5);}
.yl-app .vc-stat {background: var(--color-white, #fff); border: 1px solid var(--color-border, #dde2e9); border-radius: var(--radius-md, 8px); padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.05)); transition: box-shadow 150ms ease;}
.yl-app .vc-stat:hover {box-shadow: var(--shadow-2, 0 2px 6px rgba(0,0,0,0.08));}
.yl-app .vc-stat-icon {width: 44px; height: 44px; border-radius: var(--radius-md, 8px); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;}
.yl-app .vc-stat-icon.is-primary, .yl-app .vc-stat-icon.is-info {background: var(--color-primary-container, #f3f7ff); color: var(--color-primary, #1664ff);}
.yl-app .vc-stat-icon.is-success {background: var(--color-success-bg, #e2f5eb); color: var(--color-success, #2a814b);}
.yl-app .vc-stat-icon.is-warning {background: var(--color-warning-bg, #fdf3de); color: var(--color-warning, #bd7e00);}
.yl-app .vc-stat-icon.is-danger {background: var(--color-error-container, #feeced); color: var(--color-danger, #d7312a);}
.yl-app .vc-stat-icon.is-neutral {background: var(--color-surface-container, #f7f9fb); color: var(--color-on-surface-variant, #86909c);}
.yl-app .vc-stat-num {font-size: var(--font-size-h1, 20px); font-weight: var(--font-weight-semibold, 600); color: var(--color-on-surface, #0c0d0e); line-height: 28px;}
.yl-app .vc-stat-sub {font-size: var(--font-size-caption, 10px); color: var(--color-on-surface-variant, #86909c); margin-top: 2px;}
.yl-app .yl-list-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-6); color: var(--color-on-surface-variant, #86909c); font-size: var(--font-size-body, 12px); text-align: center;}
.yl-app .yl-list-empty > i, .yl-app .yl-list-empty > .bi {font-size: 48px; margin-bottom: var(--space-4); color: var(--color-on-surface-variant, #86909c); opacity: 0.5;}
.yl-app .op-qty-wrap {display: flex; flex-direction: column; gap: 4px;}
.yl-app .op-qty-text {font-size: 13px; line-height: 1.4; color: var(--color-text-1, #0c0d0e);}
.yl-app .op-qty-done {font-weight: 500;}
.yl-app .op-qty-sep {margin: 0 2px; color: var(--color-text-3, #737a87);}
.yl-app .op-qty-total {color: var(--color-text-2, #505660);}
.yl-app .op-qty-pct {font-weight: 500; margin-left: 4px;}
.yl-app .op-qty-bar {width: 100%; height: 4px; background: var(--grey-2, #ebecef); border-radius: 2px; overflow: hidden;}
.yl-app .op-qty-bar-inner {height: 100%; border-radius: 2px; transition: width 300ms ease;}
.yl-app .operator-tags-inline {display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1.6;}
.yl-app .operator-tag {display: inline-block; padding: 1px 8px; font-size: 13px; color: var(--color-text-1, #0c0d0e); background: var(--grey-1, #f7f8fa); border-radius: var(--radius-sm, 4px); white-space: nowrap;}
.yl-app .operator-dropdown-wrap, .yl-app .search-input-with-icon {position: relative; display: inline-flex; align-items: center;}
.yl-app .operator-more-btn {display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--primary-6, #1664ff); text-decoration: none; cursor: pointer; white-space: nowrap; padding: 1px 4px; border-radius: var(--radius-sm, 4px); transition: background 150ms ease, color 150ms ease;}
.yl-app .operator-more-btn:hover {background: rgba(22,100,255,.06); color: var(--primary-5, #366ef4);}
.yl-app .operator-more-btn i {font-size: 10px; transition: transform 200ms ease;}
.yl-app .operator-dropdown-panel {position: absolute; top: 100%; left: 0; z-index: 9999; min-width: 120px; margin-top: 4px; padding: 6px 0; background: #fff; border: 1px solid var(--color-border-2, #dde2e9); border-radius: var(--radius-sm, 6px); box-shadow: 0 6px 20px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);}
.yl-app .operator-dropdown-item, body > .operator-dropdown-panel .operator-dropdown-item {display: block; padding: 4px 12px; font-size: 13px; color: var(--color-text-1, #0c0d0e); white-space: nowrap; transition: background 100ms ease;}
.yl-app .operator-dropdown-item:hover, body > .operator-dropdown-panel .operator-dropdown-item:hover, .yl-app .btn-outline-secondary:hover, .yl-app .table-hover>tbody>tr:hover {background: var(--grey-1, #f7f8fa);}
.yl-app .operator-dropdown-item.disabled, body > .operator-dropdown-panel .operator-dropdown-item.disabled, body > .dropdown-item.disabled {color: var(--color-text-4, #c9cdd4); pointer-events: none;}
.yl-app tr.is-dropdown-open {position: relative; z-index: 10;}
body > .operator-dropdown-panel {position: fixed; z-index: 2147483600; min-width: 120px; margin-top: 0; padding: 6px 0; background: #fff; border: 1px solid var(--color-border-2, #dde2e9); border-radius: var(--radius-sm, 6px); box-shadow: 0 6px 20px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);}
body > .dropdown-menu {position: absolute; z-index: 1000; display: none; min-width: 10rem; padding: 4px 0; margin: 4px 0 0; font-size: 14px; color: var(--color-text-1, #0c0d0e); text-align: left; list-style: none; background: var(--color-bg-1, #fff); border: 1px solid var(--color-border-1, #f2f3f5); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-2, 0 4px 10px rgba(0,0,0,.08));}
body > .dropdown-menu-end, .yl-app .dropdown-menu-end {right: 0; left: auto;}
body > .dropdown-item {display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; clear: both; font-weight: 400; color: var(--color-text-1, #0c0d0e); text-align: inherit; white-space: nowrap; background: transparent; border: 0; cursor: pointer; text-decoration: none;}
body > .dropdown-item:hover, body > .dropdown-item:focus, .yl-app .dropdown-item:hover, .yl-app .dropdown-item:focus {background: var(--grey-1, #f7f8fa); color: var(--color-primary, #1664ff);}
body > .dropdown-item.active, .yl-app .btn-outline-primary:hover, .yl-app .dropdown-item.active {background: var(--primary-1, #e8f3ff); color: var(--color-primary, #1664ff);}
@media (max-width: 768px) {
.yl-app .vc-stats {grid-template-columns: 1fr;}
}
.menu-tree, .yl-app .menu-tree ul, .yl-app .tree-view > ul, .yl-app #departmentTree, .yl-app .tree-node > ul.children {list-style: none; margin: 0; padding: 0;}
.yl-app .menu-tree ul {padding-left: 24px; margin-left: 12px; border-left: 1px solid var(--color-border); transition: max-height 280ms ease, opacity 280ms ease; overflow: hidden;}
.yl-app .menu-tree li, .yl-app .dropdown, .yl-app .dropup, .yl-app .dropend, .yl-app .dropstart, .yl-app .icon-picker-container, .has-submenu > .nav-link, .header-avatar-wrapper {position: relative;}
.yl-app .menu-tree > .tree-root {margin-bottom: 2px;}
.yl-app .menu-tree > .tree-root > .tree-node-header {background: var(--color-bg-2); border-radius: var(--radius-md); margin-bottom: 2px;}
.yl-app .menu-tree > .tree-root > .tree-children {padding-left: 24px; margin-left: 14px; border-left: 1px solid var(--color-border);}
.yl-app .tree-node-header {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); cursor: default; transition: background var(150ms), box-shadow var(150ms); border: 1px solid transparent; min-height: 40px;}
.yl-app .tree-node-header:hover {background: var(--color-bg-hover);}
.yl-app .tree-toggle {width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: none; background: transparent; color: var(--color-text-3); cursor: pointer; border-radius: var(--radius-sm); transition: transform var(150ms), color var(150ms); font-size: 12px; padding: 0;}
.yl-app .tree-toggle:hover {color: var(--color-text-1); background: var(--color-bg-5);}
.yl-app .tree-root.expanded > .tree-node-header .tree-toggle {transform: rotate(90deg);}
.yl-app .tree-node-icon {width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 16px; flex: 0 0 32px; background: var(--color-primary-tag-bg); color: var(--color-primary);}
.yl-app .tree-node-icon.level-sub {background: var(--color-bg-5); color: var(--color-text-3); width: 28px; height: 28px; font-size: 14px; flex: 0 0 28px;}
.yl-app .tree-node-name, .yl-app .department-name {font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .tree-node-url {font-size: var(--font-size-caption); color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;}
.yl-app .tree-node-actions {display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; opacity: 0; transition: opacity var(150ms);}
.yl-app .tree-node-body {display: none; padding: var(--space-2) var(--space-4) var(--space-3) 52px;}
.yl-app .tree-node-body-inner {display: flex; flex-wrap: wrap; gap: var(--space-2);}
.yl-app .tree-root.expanded > .tree-children, .yl-app .photo-preview-container:hover .photo-preview-actions, .yl-app .filter-bar--task .search-field.has-value .search-field-clear, .yl-app .filter-dropdown.has-value .fd-clear {display: flex;}
.yl-app .tree-perm-count {font-size: var(--font-size-caption); color: var(--color-text-3); white-space: nowrap;}
.yl-app .tree-others {margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--color-border);}
.yl-app .tree-others-title {display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-2); margin-bottom: var(--space-3);}
.yl-app .tree-others-title i {color: var(--color-warning); font-size: 16px;}
.yl-app .tree-node.has-children > ul.children {display: block; padding-left: var(--space-5); margin-left: 16px; border-left: 1px solid var(--color-border);}
.yl-app .perm-group {border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(150ms);}
.yl-app .perm-group:hover {border-color: var(--color-border);}
.yl-app .perm-group-title {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-2); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-1); border-bottom: 1px solid var(--color-border); cursor: pointer; user-select: none;}
.yl-app .perm-group-title i, .yl-app .permission-group-title i {color: var(--color-primary); font-size: 16px;}
.yl-app .permission-form-footer {display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--color-border);}
.yl-app .permission-group {margin-bottom: var(--space-4);}
.yl-app .permission-subgroup {padding-left: var(--space-4);}
.yl-app .permission-items {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3);}
.yl-app .permission-item-new {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background-color 150ms ease;}
.yl-app .permission-item-new:hover {background: var(--color-bg-2);}
.yl-app .permission-item-new .permission-code {font-family: var(--font-size-mono, monospace); font-size: var(--font-size-caption, 12px); color: var(--color-on-surface-variant, #86909c); background: var(--color-bg-3, #f2f3f5); border-radius: var(--radius-sm); padding: 1px 6px;}
.yl-app .form-block, .yl-app .yl-list-section {margin-bottom: var(--space-6);}
.yl-app .form-block-title {display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-h4, 16px); font-weight: var(--font-weight-semibold, 600); margin-bottom: var(--space-4); color: var(--color-on-surface);}
.yl-app .preset-library, .yl-app .assigned-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3);}
.yl-app .preset-lib-name {font-size: var(--font-size-body, 12px); color: var(--color-on-surface);}
.yl-app .preset-lib-code {font-family: var(--font-size-mono, monospace); font-size: var(--font-size-caption, 12px); color: var(--color-on-surface-variant); margin-left: auto;}
.yl-app .preset-lib-add {background: var(--color-primary-tag-bg); color: var(--color-primary); border: none; border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: var(--font-size-body, 12px); transition: all 150ms ease;}
.yl-app .preset-lib-add:hover, .yl-app .vc-step.is-active .vc-step-n {background: var(--color-primary); color: #fff;}
.yl-app .assigned-item, .yl-app .preset-lib-card {display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px 10px; background: var(--color-white, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
.yl-app .assigned-remove {background: transparent; border: none; color: var(--color-on-surface-variant); cursor: pointer; font-size: var(--font-size-body, 12px); transition: color 150ms ease;}
.yl-app .assigned-remove:hover, .yl-app .action-danger, .yl-app #clientAttachmentsModal .attachments-grid .file-info .bi-file-earmark-pdf, .yl-app #attachmentsList .attachments-grid .file-info .bi-file-earmark-pdf, .yl-app #attachmentsModal .attachments-grid .file-info .bi-file-earmark-pdf, .yl-app .status-tag-text.status-tag-error {color: var(--color-danger);}
.yl-app .perm-target-banner {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-2); border-radius: var(--radius-md); margin-bottom: var(--space-4);}
.yl-app .perm-target-name {font-weight: 600; color: var(--color-on-surface);}
.yl-app .perm-empty-state {padding: var(--space-8); text-align: center; color: var(--color-on-surface-variant); font-size: var(--font-size-body, 12px);}
.yl-app .block-hint {font-size: var(--font-size-caption, 12px); color: var(--color-on-surface-variant); margin: var(--space-2) 0;}
.yl-app .tree-toolbar {display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);}
.yl-app .tree-search-box, .yl-app .form-content, .yl-app .employee-details, .yl-app .info-content, .yl-app .search-modal-info {flex: 1;}
.yl-app .tree-action-btn {border: none; background: transparent; color: var(--color-primary); cursor: pointer; font-size: var(--font-size-body, 12px); padding: 4px 6px;}
.yl-app .tree-action-btn:hover {color: var(--color-primary-hover, var(--color-primary));}
.yl-app .tree-meta {font-size: var(--font-size-caption, 12px); color: var(--color-on-surface-variant);}
.yl-app .tree-others {margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border);}
.yl-app .tree-others-title {font-size: var(--font-size-caption, 12px); color: var(--color-on-surface-variant); margin-bottom: var(--space-2);}
.yl-app .tree-root.is-selected > .tree-node-header {background: var(--color-primary-tag-bg); box-shadow: inset 3px 0 0 var(--color-primary);}
.yl-app .assigned-empty {padding: var(--space-6); text-align: center; color: var(--color-on-surface-variant); font-size: var(--font-size-body, 12px); border: 1px dashed var(--color-border); border-radius: var(--radius-md);}
.yl-app .vc-tabs {display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-6);}
.yl-app .vc-loading-hint i {animation: vc-spin 1s linear infinite;}
.yl-app .vc-hierarchy {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, #1a3a5c, #0d253f); border: none; border-radius: var(--radius-md); margin-bottom: var(--space-4); flex-wrap: wrap; color: #ffffff;}
.yl-app .vc-hierarchy-step {display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-sm); font-size: var(--font-size-body); color: #e0e8f0; text-decoration: none; font-weight: var(--font-weight-medium); transition: all var(150ms);}
.yl-app .vc-hierarchy-step:hover {background: rgba(255, 255, 255, .12); color: #ffffff; box-shadow: var(--shadow-sm);}
.yl-app .vc-hierarchy-step.is-active {background: var(--color-primary); color: #ffffff; border-color: var(--color-primary);}
.yl-app .vc-hierarchy-arrow {color: rgba(255, 255, 255, .5); font-size: var(--font-size-body);}
.yl-app .font-weight-bold {font-weight: 700;}
.yl-app .vc-search-box {display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 5px 12px; flex: 1; min-width: 200px; max-width: 360px; transition: border-color var(150ms);}
.yl-app .vc-search-box i {color: var(--color-text-3); font-size: 14px;}
.yl-app .vc-alert {display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-size-body); margin-bottom: var(--space-3);}
.yl-app .vc-alert i {font-size: 16px; margin-top: 1px; flex-shrink: 0;}
.yl-app .vc-alert--info, .yl-app .vc-alert.is-info {background: var(--color-tag-info-bg); color: var(--color-link);}
.yl-app .vc-alert--success, .yl-app .vc-alert.is-success {background: var(--color-tag-success-bg); color: var(--color-success);}
.yl-app .vc-alert--warning, .yl-app .vc-alert.is-warning {background: var(--color-tag-warning-bg); color: var(--color-warning);}
.yl-app .vc-alert--danger, .yl-app .vc-alert.is-danger {background: var(--color-tag-danger-bg); color: var(--color-danger);}
.yl-app .vc-steps {display: flex; align-items: center; gap: 0; padding: var(--space-4) 0; margin-bottom: var(--space-4);}
.yl-app .vc-step {display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-body); color: var(--color-text-3); position: relative;}
.yl-app .vc-step + .vc-step::before {content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 8px; height: 1px; background: var(--color-border);}
.yl-app .vc-step.is-active {color: var(--color-primary); font-weight: var(--font-weight-medium);}
.yl-app .vc-step.is-active::before {background: var(--color-primary);}
.yl-app .vc-step.is-done, .yl-app .status-tag-text.status-tag-success {color: var(--color-success);}
.yl-app .vc-step-n {width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); background: var(--color-bg-5); color: var(--color-text-3); flex-shrink: 0;}
.yl-app .vc-step.is-done .vc-step-n {background: var(--color-success); color: #fff;}
.yl-app .dropdown-group-title {font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-3); padding: 5px 12px 2px; width: 228px;}
.yl-app .dropdown-group-title + .dropdown-item {margin-top: 0;}
.yl-app .tab-panel {padding: 16px 0; font-size: var(--font-size-lead); color: var(--color-text-2); line-height: var(--line-height-h4); animation: yl-tabpanel-in 160ms ease;}
@keyframes yl-tabpanel-in {
from {opacity: 0;}
to {opacity: 1;}
}
.yl-app .tab-panel-bordered {border: 1px solid var(--color-border-2); border-top: none; padding: var(--space-4); border-radius: 0 0 4px 4px;}
.yl-app .tab-body {position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-border-2) transparent;}
.yl-app .tab-body::-webkit-scrollbar {width: 10px;}
.yl-app .tab-body::-webkit-scrollbar-thumb {background: var(--color-text-3); border-radius: 5px;}
#main-content.tab-body-flex-root {display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); min-height: 0; overflow: hidden;}
#main-content.tab-body-flex-root > .container-fluid.tab-body-flex-col {display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto;}
#main-content.tab-body-flex-root .tab-body-flex-item {flex: 1 1 auto; min-height: 240px; overflow-y: auto; overscroll-behavior: contain;}
.yl-app .od-thumb {width: 30px; height: 30px; object-fit: cover; border-radius: 4px; margin: 2px; cursor: pointer; display: inline-block; vertical-align: middle; border: 1px solid var(--color-border, #dde2e9);}
.yl-app .od-thumb-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 2px;}
.yl-app .od-name-cell {max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
.yl-app .tree-node {margin: 2px 0; position: relative;}
.yl-app .department-item {display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; transition: background-color var(150ms) ease, border-color var(150ms) ease; min-height: 48px;}
.yl-app .department-item:hover {background: var(--color-bg-hover); border-color: var(--color-border);}
.yl-app .department-info {display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0;}
.yl-app .toggle-children {width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: var(--color-text-3); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(150ms) ease, color var(150ms) ease;}
.yl-app .tree-node.collapsed > .department-item .toggle-children, .yl-app .menu-item.collapsed .toggle-children i {transform: rotate(-90deg);}
.yl-app .department-drag-handle {color: var(--color-text-3); cursor: grab; font-size: 14px; flex: 0 0 auto;}
.yl-app .department-drag-handle:active {cursor: grabbing;}
.yl-app .department-icon {width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 16px; background: var(--color-primary-tag-bg); color: var(--color-primary);}
.yl-app .department-parent {font-size: var(--font-size-caption); color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .actions {display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; opacity: 0; transition: opacity var(150ms) ease;}
.yl-app .department-option-level-1 {margin-left: var(--space-4);}
.yl-app .department-option-level-2 {margin-left: var(--space-6);}
.yl-app .department-option-level-3 {margin-left: var(--space-8);}
.yl-app .permission-group-header {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0;}
.yl-app .permission-group-body {padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md);}
.yl-app .permission-group-title {display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-1);}
.yl-app .role-title {font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-1); margin: 0;}
.yl-app .role-description {font-size: var(--font-size-caption); color: var(--color-text-3);}
.yl-app .perm-tag {display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-caption); color: var(--color-text-2);}
.yl-app .perm-tag-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;}
.yl-app .preset-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4);}
.yl-app .menu-item-content {display: flex; gap: var(--space-3);}
.yl-app .menu-item-icon {width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-primary-tag-bg); color: var(--color-primary); font-size: 18px;}
.yl-app .preset-header {display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;}
.yl-app .preset-name {font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-1);}
.yl-app .presetCode {font-family: var(--font-size-mono, monospace); font-size: var(--font-size-caption); color: var(--color-text-3);}
.yl-app .preset-description {font-size: var(--font-size-caption); color: var(--color-text-3); margin-top: 2px;}
.yl-app .preset-actions {display: flex; gap: var(--space-2);}
.yl-app .preset-meta {display: flex; gap: var(--space-4); font-size: var(--font-size-caption); color: var(--color-text-3); border-top: 1px dashed var(--color-border); padding-top: var(--space-3);}
.yl-app .vc-btn--secondary:hover, .yl-app .vc-btn--ghost:hover {box-shadow: 0 0 0 1px rgba(22,100,255,0.8), 0 2px 1px 0 rgba(0,0,0,0.08);}
.yl-app .vc-btn.disabled, .yl-app .vc-btn:disabled {opacity: 0.6; cursor: not-allowed;}
.yl-app .main-grid {display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: var(--space-4); align-items: stretch;}
@media (max-width: 992px) {
.yl-app .main-grid {grid-template-columns: 1fr;}
}
$opScope: '.yl-app, .staff-form-page, .daily-operation-form-page'; .yl-app .operator-input-wrap, .staff-form-page .operator-input-wrap {position: relative; width: 100%; display: block;}
.yl-app .operator-input-wrap #operator_input, .staff-form-page .operator-input-wrap #operator_input {width: 100% !important; padding-right: 36px !important;}
.yl-app .operator-input-wrap #operator_clear, .staff-form-page .operator-input-wrap #operator_clear {position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 26px !important; height: 26px !important; padding: 0 !important; border: none !important; background: var(--grey-2, #e5e6eb) !important; color: var(--color-text-2, #4e5969) !important; border-radius: var(--radius-sm, 4px) !important; display: none !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 2 !important;}
.yl-app .operator-input-wrap.has-value #operator_clear, .staff-form-page .operator-input-wrap.has-value #operator_clear, .yl-app .d-inline-flex {display: inline-flex !important;}
.yl-app .operator-input-wrap #operator_clear:hover, .staff-form-page .operator-input-wrap #operator_clear:hover {background: var(--grey-3, #c9cdd4) !important; color: var(--color-text-1, #1d2129) !important;}
.yl-app .operator-input-wrap #operator_suggestions, .staff-form-page .operator-input-wrap #operator_suggestions {position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: 2px !important; z-index: 1050 !important;}
.yl-app .operation-items-container, .staff-form-page .operation-items-container {border: 1px solid var(--color-border-2, #eaedf1); border-radius: 4px; overflow: hidden; background: var(--color-white, #fff);}
.yl-app .operation-item-main, .staff-form-page .operation-item-main {display: grid; grid-template-columns: 32px minmax(80px, 1fr) minmax(70px, 1fr) 110px 80px minmax(88px, 0.8fr) minmax(110px, 1fr) 80px; gap: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; align-items: center; transition: background-color 150ms ease;}
.yl-app .operation-item-header, .staff-form-page .operation-item-header {background: var(--color-bg-4, #f6f8fa); border-bottom: 1px solid var(--color-border-2, #eaedf1);}
.yl-app .operation-item-header .operation-item-main, .staff-form-page .operation-item-header .operation-item-main {font-weight: 500; color: var(--color-text-2, #42464E); font-size: 13px; padding: 10px 12px; min-height: 42px; letter-spacing: 0;}
.yl-app .operation-item-header .operation-item-col, .staff-form-page .operation-item-header .operation-item-col {display: flex; align-items: center; justify-content: flex-start; text-align: left; color: var(--color-text-2, #42464E); font-weight: 500; font-size: 13px;}
.yl-app .operation-item-header .operation-item-col-serial, .staff-form-page .operation-item-header .operation-item-col-serial {justify-content: center; text-align: center;}
.yl-app .operation-item-header .operation-item-col-actions, .staff-form-page .operation-item-header .operation-item-col-actions {justify-content: flex-start; text-align: left;}
.yl-app .operation-item-col, .staff-form-page .operation-item-col {display: flex; align-items: center; justify-content: flex-start; min-width: 0;}
.yl-app .operation-item-col-serial, .staff-form-page .operation-item-col-serial {justify-content: center; overflow: hidden;}
.yl-app .operation-item-col-township, .staff-form-page .operation-item-col-township, .yl-app .operation-item-col-village, .staff-form-page .operation-item-col-village, .yl-app .operation-item-col-date, .staff-form-page .operation-item-col-date, .yl-app .operation-item-col-quantity, .staff-form-page .operation-item-col-quantity, .yl-app .operation-item-col-flight-charts, .staff-form-page .operation-item-col-flight-charts, .yl-app .operation-item-col-operation-photos, .staff-form-page .operation-item-col-operation-photos {overflow: visible;}
.yl-app .operation-item-col-actions, .staff-form-page .operation-item-col-actions {justify-content: flex-start; overflow: visible;}
.yl-app .item-row .operation-item-col .ui-input, .staff-form-page .item-row .operation-item-col .ui-input {width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--color-border-3, #DDE2E9); border-radius: 4px; outline: none; background-color: var(--color-white); color: var(--color-text-1); font-size: 13px; font-weight: 400; line-height: 1.5; box-sizing: border-box; display: block; transition: border-color 0.2s, box-shadow 0.2s;}
.yl-app .item-row .operation-item-col .ui-input:hover:not(:focus):not(:disabled), .staff-form-page .item-row .operation-item-col .ui-input:hover:not(:focus):not(:disabled), .yl-app .item-row .operation-item-col .form-control:hover:not(:focus):not(:disabled), .staff-form-page .item-row .operation-item-col .form-control:hover:not(:focus):not(:disabled), .yl-app .form-control:hover, .yl-app .form-select:hover {border-color: var(--color-primary, #1664ff);}
.yl-app .item-row .operation-item-col .ui-input:focus, .staff-form-page .item-row .operation-item-col .ui-input:focus, .yl-app .item-row .operation-item-col .form-control:focus, .staff-form-page .item-row .operation-item-col .form-control:focus {border-color: var(--color-primary, #1664ff); box-shadow: 0 0 0 2px rgba(22, 100, 255, 0.1); outline: none;}
.yl-app .item-row .operation-item-col .ui-input::placeholder, .staff-form-page .item-row .operation-item-col .ui-input::placeholder, .yl-app .item-row .operation-item-col .form-control::placeholder, .staff-form-page .item-row .operation-item-col .form-control::placeholder {color: var(--color-text-3, #737A87);}
.yl-app .mobile-only-label, .staff-form-page .mobile-only-label {display: none; font-size: 11px; color: var(--color-text-3, #86909c); margin-bottom: 2px; white-space: nowrap;}
.yl-app .serial-number, .staff-form-page .serial-number {display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--color-bg-4, #f6f8fa); color: var(--color-text-2, #42464E); border-radius: 4px; font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums;}
.yl-app .delete-item-btn, .staff-form-page .delete-item-btn {display: inline-flex; align-items: center; justify-content: flex-start; padding: 4px 4px 4px 0; background: transparent; border: none; color: var(--danger-5, #EE3F38); font-size: 13px; line-height: 1.5; white-space: nowrap; cursor: pointer; text-decoration: none; transition: color 0.15s;}
.yl-app .delete-item-btn:hover, .staff-form-page .delete-item-btn:hover {color: var(--danger-6, #D7312A); background: transparent;}
.yl-app .delete-item-btn:focus-visible, .staff-form-page .delete-item-btn:focus-visible {outline: none; text-decoration: underline;}
.yl-app .delete-item-btn i, .staff-form-page .delete-item-btn i {font-size: 13px; margin-right: 3px;}
.yl-app .image-upload-area, flex-wrap: wrap; .staff-form-page .image-upload-area {display: flex; align-items: center; gap: 6px;}
.yl-app .operation-item-col-flight-charts .image-upload-box, .yl-app .operation-item-col-operation-photos .image-upload-box, .staff-form-page .operation-item-col-flight-charts .image-upload-box, .staff-form-page .operation-item-col-operation-photos .image-upload-box {width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 4px !important; border: 1px solid var(--color-border-3, #DDE2E9) !important; background: var(--color-white, #fff); position: relative !important; transition: border-color 0.2s, background-color 0.2s;}
.yl-app .operation-item-col-flight-charts .image-upload-container, .yl-app .operation-item-col-operation-photos .image-upload-container, .staff-form-page .operation-item-col-flight-charts .image-upload-container, .staff-form-page .operation-item-col-operation-photos .image-upload-container {align-items: center; display: flex; flex-wrap: wrap; gap: 6px !important; min-height: 32px !important; width: 100%;}
.yl-app .operation-item-col-flight-charts .image-upload-box.upload-btn .upload-icon, .yl-app .operation-item-col-operation-photos .image-upload-box.upload-btn .upload-icon, .staff-form-page .operation-item-col-flight-charts .image-upload-box.upload-btn .upload-icon, .staff-form-page .operation-item-col-operation-photos .image-upload-box.upload-btn .upload-icon {font-size: 14px !important; color: var(--color-text-3, #737A87) !important; line-height: 1 !important;}
.yl-app .operation-item-col-flight-charts .image-upload-box img, .yl-app .operation-item-col-operation-photos .image-upload-box img, .staff-form-page .operation-item-col-flight-charts .image-upload-box img, .staff-form-page .operation-item-col-operation-photos .image-upload-box img {border-radius: 3px !important; width: 100% !important; height: 100% !important; object-fit: cover !important;}
.yl-app .image-upload-box.upload-btn:hover, .staff-form-page .image-upload-box.upload-btn:hover {border-color: var(--color-primary, #1664ff) !important; background: rgba(22, 100, 255, 0.04) !important;}
.yl-app .operation-item-col-flight-charts .image-upload-box .view-btn, .yl-app .operation-item-col-operation-photos .image-upload-box .view-btn, .staff-form-page .operation-item-col-flight-charts .image-upload-box .view-btn, .staff-form-page .operation-item-col-operation-photos .image-upload-box .view-btn {inset: 0 !important; width: auto !important; height: auto !important; font-size: 14px !important; border-radius: 0 !important; background: rgba(12, 13, 14, 0.35) !important; color: var(--color-white) !important; top: auto !important; left: auto !important; right: auto !important; box-shadow: none !important;}
.yl-app .operation-item-col-flight-charts .image-upload-box .delete-btn, .yl-app .operation-item-col-operation-photos .image-upload-box .delete-btn, .staff-form-page .operation-item-col-flight-charts .image-upload-box .delete-btn, .staff-form-page .operation-item-col-operation-photos .image-upload-box .delete-btn {width: 14px !important; height: 14px !important; font-size: 9px !important; line-height: 1 !important; border-radius: 50% !important; background: var(--danger-6, #d7312a) !important; color: #fff !important; top: 1px !important; right: 1px !important; z-index: 12 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;}
@media (max-width: 768px) {
.yl-app .operation-item-main, .staff-form-page .operation-item-main {grid-template-columns: 1fr; padding: 12px; gap: 10px;}
.yl-app .operation-item-header, .staff-form-page .operation-item-header {display: none;}
.yl-app .item-row .operation-item-col, .staff-form-page .item-row .operation-item-col {display: flex; flex-direction: column; align-items: stretch;}
.yl-app .mobile-only-label, .staff-form-page .mobile-only-label, .yl-app .mobile-only, .staff-form-page .mobile-only {display: block;}
.yl-app .serial-actions-row, .staff-form-page .serial-actions-row {display: flex; align-items: center; justify-content: space-between; flex: 1 1 100%; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--color-border-2, #dde2e9);}
.yl-app .serial-actions-row .serial-number, .staff-form-page .serial-actions-row .serial-number {font-weight: 600; color: var(--color-text-1, #1d2129); font-size: var(--font-size-lead, 14px);}
.yl-app .operation-item-col-flight-charts, .yl-app .operation-item-col-operation-photos, .staff-form-page .operation-item-col-flight-charts, .staff-form-page .operation-item-col-operation-photos {flex: 0 0 auto !important;}
}
.yl-app .top-nav {height: 48px; background: var(--bg-white); display: flex; align-items: center; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); position: relative; z-index: 100; width: 100%; flex-shrink: 0;}
.yl-app .yl-list-section__count {font-size: var(--font-size-body, 12px); color: var(--color-on-surface-variant, #86909c); margin-left: var(--space-4); white-space: nowrap;}
.yl-app .filter-group, .yl-app .page-header-title-row, .yl-app .page-header-actions {display: flex; align-items: center; gap: var(--space-3);}
.yl-app .yl-list-section__head {display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border, #dde2e9);}
.yl-app .yl-list-section__title {margin: 0; font-size: var(--font-size-h3, 16px); font-weight: var(--font-weight-semibold, 600); color: var(--color-on-surface, #0c0d0e);}
.yl-app .top-nav {height: 48px; background: var(--bg-white); display: flex; align-items: center; box-shadow: var(--shadow-card); position: relative; z-index: 100; flex-shrink: 0;}
.yl-app .nav-left, .yl-app .td-actions, .yl-app .page-header-actions, .yl-app .page-header-title-row, .yl-app .pool-detail-header__left {display: flex; align-items: center; gap: 12px;}
.yl-app .nav-logo {width: 103px; height: 24px; flex-shrink: 0;}
.yl-app .nav-logo svg {height: 24px; width: auto;}
.yl-app .nav-search {margin-left: 24px; position: relative;}
.yl-app .nav-search .search-icon {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-3);}
.yl-app .nav-right {margin-left: auto; display: flex; align-items: center; gap: 16px; padding-right: 24px;}
.yl-app .nav-link {font-size: 13px; color: var(--text-1); cursor: pointer; white-space: nowrap; text-decoration: none;}
.yl-app .nav-icon {width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;}
.yl-app .nav-icon .notification-dot {position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; background: var(--danger-5); border-radius: 50%;}
.yl-app .steps-bar {background: var(--color-white); padding: 32px 32px 24px; display: flex; justify-content: center;}
.yl-app .steps-h {align-items: flex-start; column-gap: 4px; display: flex; max-width: 720px; width: 100%;}
.yl-app .ind {width: 24px; height: 24px; border-radius: 23px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; font-size: 12px; line-height: 22px; box-sizing: border-box;}
.yl-app .step-title {flex-shrink: 0; line-height: 22px; letter-spacing: 0.04px; color: var(--steps-text); font-size: 14px; font-weight: 500;}
.yl-app .step-title.pending {color: var(--steps-desc);}
.yl-app .content-area {max-width: 1100px; margin: 0 auto; padding: 0 32px 32px; background: var(--color-white);}
.yl-app .section, .yl-app .info-section {margin-bottom: 32px;}
.yl-app .section-title {font-size: 14px; font-weight: 500; color: var(--text-1); margin-bottom: 16px; line-height: 22px;}
.yl-app .section-title .blue-bar {width: 4px; height: 20px; background: var(--color-primary); border-radius: 2px;}
.yl-app .section-title span {font-size: 16px; font-weight: 500; color: var(--color-text-1);}
.yl-app .form-row {display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: 20px;}
.yl-app .form-label .required {color: var(--danger-5); margin-right: 2px;}
.yl-app .form-helper {font-size: 12px; color: var(--color-text-3); margin-top: 6px; line-height: 1.6;}
.yl-app .tab-buttons {display: flex; gap: 0;}
.yl-app .tab-btn {height: 32px; padding: 0 16px; border: 1px solid var(--color-border-3); background: var(--color-white); font-size: 13px; color: var(--color-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;}
.yl-app .tab-btn:only-child, .yl-app .form-check-input[type=checkbox] {border-radius: 4px;}
.yl-app .tab-btn + .tab-btn {border-left: none;}
.yl-app .tab-btn.active {background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white);}
.yl-app .form-select:hover, .yl-app .form-input:hover, .yl-app .radio.checked, .yl-app .btn-default:hover, .yl-app .role-card:hover {border-color: var(--color-primary);}
.yl-app .form-input {height: 32px; border: 1px solid var(--color-border-3); border-radius: 4px; padding: 0 12px; font-size: 13px; color: var(--color-text-1); outline: none;}
.yl-app .form-input:focus {border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(22,100,255,0.1);}
.yl-app .selects-row {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
.yl-app .spec-tabs {display: flex; gap: 0; margin-top: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border-2);}
.yl-app .spec-tab {padding: 8px 16px; font-size: 13px; color: var(--color-text-2); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;}
.yl-app .spec-tab:hover:not(.active), .yl-app .status-tag-text.status-tag-processing, .yl-app .page-header .back-arrow:hover {color: var(--color-primary);}
.yl-app .spec-table {width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-2); border-radius: 4px; overflow: hidden; margin-bottom: 8px;}
.yl-app .price-text {color: var(--color-warning); font-weight: 500;}
.yl-app .sort-icon {display: inline-flex; flex-direction: column; margin-left: 4px; vertical-align: middle;}
.yl-app .radio.checked::after {content: ''; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%;}
.yl-app .checkbox.checked {background: var(--color-primary); border-color: var(--color-primary);}
.yl-app .number-input {display: inline-flex; align-items: center; border: 1px solid var(--color-border-3); border-radius: 4px; overflow: hidden; height: 32px;}
.yl-app .number-input .num-btn {width: 32px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--color-bg-4); border: none; color: var(--color-text-2); font-size: 16px;}
.yl-app .storage-table {width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-2); border-radius: 4px; overflow: hidden; margin-bottom: 12px;}
.yl-app .add-link {color: var(--color-primary); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;}
.yl-app .add-link:hover {color: var(--primary-7);}
.yl-app .delete-link {color: var(--danger-5); font-size: 13px; cursor: pointer;}
.yl-app .delete-link:hover, .yl-app .status-tag-text.status-tag-error {color: var(--danger-6);}
.yl-app .bottom-bar {position: sticky; bottom: 0; left: 0; right: 0; height: 48px; background: var(--color-white); border-top: 1px solid var(--color-border-2); display: flex; align-items: center; padding: 0 32px; z-index: 100;}
.yl-app .bottom-bar-left, .yl-app .nav-icons {display: flex; align-items: center; gap: 8px;}
.yl-app .bottom-bar-center {display: flex; align-items: center; gap: 8px; margin-left: 40px;}
.yl-app .bottom-bar-right {margin-left: auto; display: flex; align-items: center; gap: 12px;}
.yl-app .btn-primary:hover {background: var(--primary-7);}
.yl-app .price-large {font-size: 20px; font-weight: 600; color: var(--color-warning);}
.yl-app .price-unit {font-size: 13px; color: var(--color-warning);}
.yl-app .savings-text {font-size: 12px; color: var(--color-success);}
.yl-app .info-icon-small {display: inline-flex; align-items: center; cursor: pointer; color: var(--color-text-3);}
.yl-app .help-icon {display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; color: var(--color-text-3); cursor: pointer;}
.yl-app .inline-flex {display: inline-flex; align-items: center; gap: 8px;}
.yl-app .search-input-with-icon .form-input {padding-left: 30px;}
.yl-app .search-input-with-icon .icon {position: absolute; left: 10px; color: var(--color-text-3);}
.yl-app .selected-info {display: block; font-size: 12px; color: var(--color-text-3); margin-top: 8px;}
.yl-app .checkbox-label {display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-2); cursor: pointer;}
.yl-app .uikit-shell {min-width: 0; flex-shrink: 1;}
.yl-app .uikit-truncate {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.yl-app .uikit-nowrap {white-space: nowrap; flex-shrink: 0;}
.yl-app .uikit-table-wrap {max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;}
.yl-app .uikit-responsive-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px;}
.yl-app .uikit-main, .yl-app .uikit-toolbar, .dropdown-profile-info {min-width: 0;}
.yl-app .uikit-action-cell {max-width: 160px;}
.yl-app .uikit-action {display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;}
None {}
.yl-app .uikit-stack-sm {flex-direction: column;}
.yl-app .layout {display: flex; flex-direction: column; height: 100vh; width: 100%;}
.yl-app .layout-body {display: flex; flex: 1; overflow: hidden;}
.yl-app .search-box {display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-1); border-radius: 4px; background: var(--bg-sidebar);}
.yl-app .search-input {border: none; outline: none; background: transparent; font-size: 13px; color: var(--text-1); width: 180px; font-family: inherit;}
.yl-app .nav-icon svg, .yl-app .sidenav-collapse svg, .yl-app .filter-icon-btn svg {width: 16px; height: 16px; color: var(--text-2);}
.yl-app .sidenav {display: flex; flex-direction: column; background: var(--bg-sidebar); width: 200px; min-width: 200px; overflow: hidden; flex-shrink: 0; position: relative;}
.yl-app .sidenav-header {align-items: center; align-self: stretch; column-gap: 6px; display: flex; flex-shrink: 0; padding: 20px 22px;}
.yl-app .product-name {flex-grow: 1; height: 24px; overflow: hidden; text-overflow: ellipsis; line-height: 24px; white-space: nowrap; color: var(--text-1); font-size: 16px; font-weight: 500;}
.yl-app .sidenav-menu {align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto;}
.yl-app .group-title {flex-shrink: 0; padding: 3px 12px; line-height: 20px; letter-spacing: 0.04px; color: var(--text-3); font-size: 12px;}
.yl-app .menu-group-block {align-items: flex-start; align-self: stretch; border-radius: var(--radius-sm); display: flex; flex-direction: column; flex-shrink: 0; row-gap: 4px;}
.yl-app .menu-item {display: flex; align-items: center; column-gap: 8px; padding: 0 12px; height: 36px; border-radius: 4px; cursor: pointer; transition: background 0.15s;}
.yl-app .menu-text {flex-grow: 1; height: 22px; overflow: hidden; text-overflow: ellipsis; line-height: 22px; letter-spacing: 0.04px; white-space: nowrap; color: var(--text-1); font-size: 13px;}
.yl-app .collapse-btn {display: inline-flex; flex-shrink: 0; align-items: flex-start; align-self: stretch; column-gap: 10px; border-top: 1px solid var(--border-2); padding: 11px 24px 12px; cursor: pointer; transition: background 0.15s;}
.yl-app .collapse-btn svg {width: 16px; height: 16px; color: var(--text-1);}
.yl-app .content {flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-white);}
.yl-app .main-content {flex: 1; overflow-y: auto; padding: 20px 32px; background: var(--bg-white);}
.yl-app .time-filter {display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
.yl-app .time-filter-btns, .yl-app .filter-group {display: flex; align-items: center; gap: 0;}
.yl-app .time-btn {padding: 5px 16px; font-size: 13px; font-weight: 400; line-height: 22px; color: var(--text-2); background: var(--bg-white); border: 1px solid var(--border-2); cursor: pointer; white-space: nowrap; transition: all 0.15s;}
.yl-app .time-btn + .time-btn, .yl-app .btn-group>.btn:not(:first-child), .yl-app .status-filter-btn + .status-filter-btn, .yl-app .operation-status-btn + .operation-status-btn {margin-left: -1px;}
.yl-app .time-btn:hover {color: var(--primary-6); border-color: var(--primary-6); z-index: 1;}
.yl-app .time-btn.active {color: var(--primary-6); border-color: var(--primary-6); background: rgba(22,100,255,0.04); z-index: 1;}
.yl-app .date-range {display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 4px; font-size: 13px; color: var(--text-2); cursor: pointer;}
.yl-app .date-range svg {width: 16px; height: 16px; color: var(--text-3);}
.yl-app .chart-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.yl-app .chart-area {width: 100%; aspect-ratio: 320 / 160; position: relative;}
.yl-app .chart-area svg {width: 100%; height: 100%; display: block;}
.yl-app .chart-legend {display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: center;}
.yl-app .chart-legend-item {display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2);}
.yl-app .chart-legend-dot {width: 8px; height: 8px; background: var(--primary-6); border-radius: 1px;}
.yl-app .desc-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;}
.yl-app .desc-item {font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); min-width: 0; padding: 12px 0;}
.yl-app .desc-label {font-size: 13px; color: var(--text-3); line-height: 20px; margin-bottom: 4px;}
.yl-app .desc-value {font-size: 13px; color: var(--text-1); line-height: 20px; display: flex; align-items: center; gap: 8px;}
.yl-app .desc-value a {color: var(--primary-6); text-decoration: none;}
.yl-app .desc-value a:hover, .yl-app .info-value-link:hover, .yl-app .billing-item-value-link:hover, .yl-app .btn-link:hover, .notification-footer a:hover, .yl-app .vc-perm-node-all:hover {text-decoration: underline;}
.yl-app .desc-value .edit-icon {width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); flex-shrink: 0;}
.yl-app .desc-value .tag-inline {display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--border-2); border-radius: 4px; font-size: 12px; color: var(--text-2); background: var(--bg-white);}
.yl-app .table-wrapper {width: 100%; border: 1px solid var(--border-1); border-radius: 0; overflow: hidden;}
.yl-app .td-user > * {display: inline-flex; vertical-align: middle; margin-right: 8px;}
.yl-app .action-link {color: var(--primary-6); cursor: pointer; font-size: 13px; text-decoration: none;}
.yl-app .user-avatar {width: 24px; height: 24px; border-radius: 50%; background: var(--primary-6); color: var(--color-white); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.yl-app .search-icon, .yl-app .info-value-shield {width: 16px; height: 16px; flex-shrink: 0;}
.yl-app .nav-links {display: flex; align-items: center; gap: 16px;}
.yl-app .menu-wrapper {align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; padding: 0 12px; row-gap: 12px;}
.yl-app .menu-icon svg, .yl-app .menu-icon img, .yl-app .content .page-header-back svg {width: 20px; height: 20px; color: var(--text-1);}
.yl-app .sidenav-collapse {position: absolute; bottom: 12px; left: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.yl-app .detail-body {flex: 1; display: flex; overflow: auto; padding: 24px 32px; gap: 24px;}
.yl-app .info-section-title {font-size: 14px; font-weight: 600; line-height: 22px; color: var(--text-1); margin-bottom: 16px;}
.yl-app .info-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 0;}
.yl-app .info-row {display: flex; align-items: flex-start; padding: 10px 0; min-height: 40px;}
.yl-app .info-label {width: 100px; flex-shrink: 0; font-size: 13px; line-height: 22px; color: var(--text-3);}
.yl-app .info-value {flex: 1; font-size: 13px; line-height: 22px; color: var(--text-1); display: flex; align-items: center; gap: 6px;}
.yl-app .info-value-link {color: var(--primary-6); cursor: pointer; text-decoration: none;}
.yl-app .info-value-icon {width: 16px; height: 16px; color: var(--text-3); cursor: pointer; flex-shrink: 0;}
.yl-app .info-value-sep {width: 1px; height: 14px; background: var(--border-2); margin: 0 4px;}
.yl-app .info-section-divider {height: 1px; background: var(--border-1); margin: 8px 0 32px;}
.yl-app .toggle-switch {width: 36px; height: 20px; border-radius: 10px; background: var(--color-text-4); position: relative; cursor: pointer; flex-shrink: 0;}
.yl-app .toggle-switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-white); transition: transform 0.2s;}
.yl-app .detail-aside {width: 240px; flex-shrink: 0;}
.yl-app .billing-item:last-child, .yl-app .table, .yl-app .pb-record:last-child, .yl-app .business-info-item:last-child, .dd-item:last-child, .yl-app .content-card--plain .form-section-title, .yl-app .claim-info-card:last-child, .yl-app .detail-section .content-card {margin-bottom: 0;}
.yl-app .menu-sub-item {display: flex; align-items: center; padding: 0 12px 0 40px; height: 36px; border-radius: 4px; cursor: pointer; transition: background 0.15s;}
.yl-app .menu-sub-item .external-icon {width: 12px; height: 12px; margin-left: 4px; color: var(--text-3);}
.yl-app .sub-tabs {display: flex; align-items: stretch; border-bottom: 1px solid var(--border-1); background: var(--bg-white); padding: 0 32px; flex-shrink: 0;}
.yl-app .sub-tab-item {position: relative; font-size: 14px; color: var(--text-2); font-weight: 400; line-height: 22px; cursor: pointer; background: transparent; border: none; white-space: nowrap; padding: 0; margin-right: 24px; display: inline-flex; align-items: center; height: 36px; transition: color 150ms ease;}
.yl-app .sub-tab-item.active {color: var(--primary-6); font-weight: 500;}
.yl-app .segmented-picker {display: inline-flex; align-items: flex-start; gap: 8px;}
.yl-app .segmented-picker-item {display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; min-height: 32px; border: none; border-radius: 4px; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 22px; letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;}
.yl-app .segmented-picker-item.active {background: var(--primary-1); box-shadow: 0 1px 1px rgba(0, 110, 255, 0), 0 0 0 1px var(--primary-disabled-bg); color: var(--primary-6); font-weight: 500;}
.yl-app .filter-date {height: 32px; padding: 0 12px; border: none; border-radius: 4px; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2), 0 1px 1px rgba(0,0,0,0.05); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; display: flex; align-items: center; gap: 8px; white-space: nowrap;}
.yl-app .filter-date-sep {color: var(--text-3); font-size: 12px;}
.yl-app .filter-separator {width: 1px; height: 20px; background: var(--border-1); margin: 0 4px;}
.yl-app .filter-icon-btn {width: 32px; height: 32px; border-radius: 4px; border: none; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2), 0 1px 1px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease;}
.yl-app .table-area {flex: 1; overflow: auto; padding: 0 32px 16px;}
.yl-app .data-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.yl-app .table-load-more {text-align: center; padding: 16px; color: var(--primary-6); font-size: 13px; cursor: pointer; border-top: 1px solid var(--border-1);}
.yl-app .table-load-more:hover, .yl-app .table-action-link:hover {color: var(--primary-active);}
.yl-app .status-dot {width: 6px; height: 6px; border-radius: 50%;}
.yl-app .status-dot-error {background: var(--color-danger);}
.yl-app .table-action-link {color: var(--primary-6); font-size: 13px; cursor: pointer; text-decoration: none; margin-right: 12px;}
.yl-app .col {flex:1 0 0%;}
.yl-app .column-gap-0 {column-gap:0 !important;}
.yl-app .column-gap-1 {column-gap:.25rem !important;}
.yl-app .column-gap-2 {column-gap:.5rem !important;}
.yl-app .column-gap-3 {column-gap:1rem !important;}
.yl-app .column-gap-4 {column-gap:1.5rem !important;}
.yl-app .column-gap-5 {column-gap:3rem !important;}
.yl-app .fst-italic {font-style:italic !important;}
.yl-app .small,.yl-app small {font-size:.875em;}
.yl-app .lead {font-size:1.125rem;font-weight:400;}
.yl-app .font-monospace {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;}
.yl-app .mw-100 {max-width:100% !important;}
.yl-app .mh-100 {max-height:100% !important;}
.yl-app .vh-100 {height:100vh !important;}
.yl-app .min-vh-100 {min-height:100vh !important;}
.yl-app .top-0 {top:0 !important;}
.yl-app .bottom-0 {bottom:0 !important;}
.yl-app .start-0 {left:0 !important;}
.yl-app .end-0 {right:0 !important;}
.yl-app .top-50 {top:50% !important;}
.yl-app .start-50 {left:50% !important;}
.yl-app .translate-middle {transform:translate(-50%,-50%) !important;}
.yl-app .float-start {float:left !important;}
.yl-app .float-end {float:right !important;}
.yl-app .float-none {float:none !important;}
.yl-app .invisible {visibility:hidden !important;}
.yl-app .visible {visibility:visible !important;}
.yl-app .user-select-none {user-select:none !important;}
.yl-app .visually-hidden,.yl-app .visually-hidden-focusable:not(:focus):not(:focus-within) {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;white-space:nowrap !important;border:0 !important;}
.yl-app .opacity-0 {opacity:0.00 !important;}
.yl-app .opacity-25 {opacity:0.25 !important;}
.yl-app .opacity-50 {opacity:0.50 !important;}
.yl-app .opacity-75 {opacity:0.75 !important;}
.yl-app .opacity-100 {opacity:1.00 !important;}
.yl-app .form-control::placeholder {color:var(--color-text-4,#c9cdd4);}
.yl-app .form-control:focus,.yl-app .form-select:focus {outline:0;border-color:var(--color-primary,#1664ff);box-shadow:0 0 0 3px rgba(22,100,255,.12);}
.yl-app .form-control:disabled,.yl-app .form-select:disabled,.yl-app .form-control[readonly] {background-color:var(--grey-1,#f7f8fa);color:var(--color-text-3);cursor:not-allowed;}
.yl-app .form-control-sm,.yl-app .form-select-sm {min-height:30px;padding:3px 10px;font-size:13px;}
.yl-app .form-control-lg,.yl-app .form-select-lg {min-height:44px;padding:9px 14px;font-size:16px;}
.yl-app .is-invalid,.yl-app .form-control.is-invalid,.yl-app .was-validated .form-control:invalid {border-color:var(--danger-6,#d7312a) !important;}
.yl-app .is-invalid:focus {box-shadow:0 0 0 3px rgba(215,49,42,.14) !important;}
.yl-app .invalid-feedback {display:none;width:100%;margin-top:4px;font-size:12px;color:var(--danger-6,#d7312a);}
.yl-app .input-group-text {display:flex;align-items:center;padding:6px 12px;font-size:14px;color:var(--color-text-2,#4e5969);background-color:var(--grey-1,#f7f8fa);border:1px solid var(--color-border-2,#eaedf1);}
.yl-app .input-group>:not(:first-child) {margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;}
.yl-app .input-group>:not(:last-child) {border-top-right-radius:0;border-bottom-right-radius:0;}
.yl-app .input-group>:first-child {border-top-left-radius:var(--radius-sm,6px);border-bottom-left-radius:var(--radius-sm,6px);}
.yl-app .input-group>:last-child {border-top-right-radius:var(--radius-sm,6px);border-bottom-right-radius:var(--radius-sm,6px);}
.yl-app .form-check .form-check-input {float:left;margin-left:-1.6em;}
.yl-app .form-check-input {width:1.1em;height:1.1em;margin-top:.2em;vertical-align:top;background-color:var(--color-bg-1,#fff);border:1px solid var(--color-border-3,#c9cdd4);appearance:none;print-color-adjust:exact;cursor:pointer;transition:.1s;}
.yl-app .form-check-input:checked, .yl-app .btn-primary, .yl-app .btn-primary:hover {background-color:var(--color-primary,#1664ff);border-color:var(--color-primary,#1664ff);}
.yl-app .form-check-input:focus, .yl-app .btn:focus {outline:0;box-shadow:0 0 0 3px rgba(22,100,255,.12);}
.yl-app .form-check-label {cursor:pointer;font-size:14px;color:var(--color-text-1);}
.yl-app .form-switch {padding-left:2.6em;}
.yl-app .form-switch .form-check-input {width:2.1em;margin-left:-2.6em;border-radius:2em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23c9cdd4'/%3E%3C/svg%3E");background-position:left center;background-repeat:no-repeat;transition:background-position .15s;}
.yl-app .form-switch .form-check-input:checked {background-position:right center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23fff'/%3E%3C/svg%3E");}
.yl-app .btn:disabled,.yl-app .btn.disabled {opacity:.5;cursor:not-allowed;pointer-events:none;}
.yl-app .btn-primary:hover {background:var(--primary-5,#4080ff);border-color:var(--primary-5,#4080ff);color:#fff;}
.yl-app .btn-primary:active {background:var(--primary-7,#0e42d2);border-color:var(--primary-7,#0e42d2);}
.yl-app .btn-secondary:hover,.yl-app .btn-light:hover {background:var(--grey-2,#e5e6eb);border-color:var(--grey-2,#e5e6eb);}
.yl-app .btn-success:hover {background: var(--success-hover); color:#fff; filter:brightness(1.08);}
.yl-app .btn-danger:hover {filter:brightness(1.08);color:#fff;}
.yl-app .btn-warning:hover {background: var(--warning-hover); color:#fff; filter:brightness(1.06);}
.yl-app .btn-outline-danger:hover {background:var(--danger-2,#fde2e0);color:var(--danger-6,#d7312a);}
.yl-app .btn-outline-success:hover {background:var(--success-1,#e8ffea);}
.yl-app .btn-outline-warning:hover {background:var(--warning-1,#fff7e8);}
.yl-app .btn-group>.btn:first-child {border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);}
.yl-app .btn-group>.btn:last-child {border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);}
.yl-app .table>:not(caption)>*>* {padding:12px 14px;border-bottom:1px solid var(--color-border-1,#f2f3f5);}
.yl-app .table-striped>tbody>tr:nth-of-type(odd) {background:rgba(247,248,250,.6);}
.yl-app .table-sm>:not(caption)>*>*, .yl-app #claimItemsTable.data-table td {padding:6px 10px;}
.yl-app .alert-primary,.yl-app .alert-info {background:var(--primary-1,#e8f3ff);border-color:var(--primary-2,#bedaff);color:var(--color-primary,#1664ff);}
.yl-app .alert-success {background:var(--success-1,#e8ffea);border-color:#aff0b5;color:var(--color-success,#00b42a);}
.yl-app .alert-warning {background:var(--warning-1,#fff7e8);border-color:#ffe4ba;color:var(--color-warning,#ff7d00);}
.yl-app .alert-danger,.yl-app .alert-error {background:var(--danger-2,#fde2e0);border-color:#fdc4c0;color:var(--danger-6,#d7312a);}
.yl-app .alert-secondary {background:var(--grey-1,#f7f8fa);border-color:var(--color-border-2);color:var(--color-text-2);}
.yl-app .alert-dismissible {padding-right:40px;}
.yl-app .nav-link {display:block;padding:8px 16px;color:var(--color-text-2,#4e5969);text-decoration:none;cursor:pointer;background:none;border:0;transition:color .15s;}
.yl-app .nav-link:hover, .yl-app .nav-link.active, .yl-app #staffSelectModal .dropdown-item:hover .fw-semibold, .yl-app #staffSelectModal .dropdown-item:focus .fw-semibold, .yl-app .copy-btn:hover, .yl-app #staffSelectModal .modal-title i, .yl-app .filter-status-btns .status-filter-btn[data-status="processing"], .yl-app .filter-status-btns .status-filter-btn[data-status="completed"], .yl-app .filter-status-btns .status-filter-btn.status-completed, .yl-app .filter-status-btns .status-filter-btn.status-active, .yl-app .filter-status-btns .status-filter-btn.status-processing, .yl-app .filter-status-btns .balance-filter-btn.status-settled {color:var(--color-primary,#1664ff);}
.yl-app .nav-tabs {border-bottom:1px solid var(--color-border-1,#f2f3f5);gap:4px;}
.yl-app .nav-tabs .nav-link {margin-bottom:-1px;border-bottom:2px solid transparent;padding:10px 16px;}
.yl-app .nav-tabs .nav-link.active {color:var(--color-primary,#1664ff);border-bottom-color:var(--color-primary,#1664ff);font-weight:var(--font-weight-medium,500);}
.yl-app .nav-pills .nav-link {border-radius:var(--radius-sm,6px);}
.yl-app .nav-pills .nav-link.active {background:var(--color-primary,#1664ff);color:#fff;}
.yl-app .fade {transition:opacity .15s linear;}
.yl-app .fade:not(.show), .offcanvas-backdrop.show, .modal-backdrop.show {opacity:0;}
.yl-app .dropdown-toggle::after {display:inline-block;margin-left:.4em;vertical-align:.15em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;}
.yl-app .dropdown-menu {position:absolute;z-index:1000;display:none;min-width:10rem;padding:4px 0;margin:4px 0 0;font-size:14px;color:var(--color-text-1);text-align:left;list-style:none;background:var(--color-bg-1,#fff);border:1px solid var(--color-border-1,#f2f3f5);border-radius:var(--radius-md,8px);box-shadow:var(--shadow-2,0 4px 10px rgba(0,0,0,.08));}
.yl-app .dropdown-item {display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;clear:both;font-weight:400;color:var(--color-text-1);text-align:inherit;white-space:nowrap;background:transparent;border:0;cursor:pointer;text-decoration:none;}
.yl-app .dropdown-item.disabled {color:var(--color-text-4);pointer-events:none;}
.yl-app .dropdown-divider {height:0;margin:4px 0;border-top:1px solid var(--color-border-1,#f2f3f5);}
.yl-app .dropdown-header {display:block;padding:6px 16px;font-size:12px;color:var(--color-text-3);}
.yl-app .list-group {display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--radius-md,8px);}
.yl-app .list-group-item {position:relative;display:block;padding:12px 16px;color:var(--color-text-1);background:var(--color-bg-1,#fff);border:1px solid var(--color-border-1,#f2f3f5);}
.yl-app .list-group-item+.list-group-item {border-top-width:0;}
.yl-app .list-group-item.active {background:var(--primary-1,#e8f3ff);color:var(--color-primary,#1664ff);border-color:var(--primary-2,#bedaff);}
.yl-app .progress-bar {background:var(--color-primary,#1664ff); color:#fff; display:flex; flex-direction:column; flex: 1; justify-content:center; min-width: 0; transition:width .3s;}
.yl-app .spinner-border {display:inline-block;width:1.4rem;height:1.4rem;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:yl-spin .75s linear infinite;}
.yl-app .spinner-border-sm {width:1rem;height:1rem;}
@keyframes yl-spin {
to {transform:rotate(360deg);}
}
.yl-app .collapsing {height:0;overflow:hidden;transition:height .25s ease;}
.btn-close { position: relative; }
.btn-close::before {content:"";position:absolute;inset:4px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center/contain;}
.btn-close:hover {opacity:1;background:var(--grey-1,#f7f8fa);}
.offcanvas-backdrop {position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background:transparent;pointer-events:none;}
body.form-page, body.staff-detail-page, border-color:rgba(22,100,255,0.8); .yl-app .pagination .page-link:hover, .yl-app .filter-field:has(.filter-dropdown) > .filter-field-label {}
.yl-app [class^="bi-"]::before, .yl-app [class*=" bi-"]::before {content:none !important;}
.yl-app .yl-list-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap;}
.yl-app .yl-list-count, .yl-app .claim-info-label, .yl-app .claim-audit-hint {font-size: 13px; color: var(--color-text-3, #737a87);}
.yl-app .yl-list-count strong, .yl-app .item-col-part-number {color: var(--color-text-1, #0c0d0e); font-weight: 600;}
.yl-app .yl-list-title {display: flex; align-items: center; font-size: var(--font-size-heading-6, 1rem); font-weight: 600; color: var(--color-text-1, #0c0d0e);}
.yl-app .tree-section {margin-bottom: var(--space-4); padding: 0;}
.yl-app .menu-tree-container {max-height: 600px; overflow-y: auto; padding: 1rem; position: relative;}
.yl-app .menu-tree {display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0;}
.yl-app .menu-tree ul {list-style: none; padding-left: 1.5rem; margin: 0; position: relative;}
pointer-events: none; .yl-app .menu-tree ul::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: var(--color-border, #dde2e9);}
.yl-app .menu-item {margin: 0.5rem 0; position: relative;}
pointer-events: none; .yl-app .menu-item::before {content: ''; position: absolute; left: -1.5rem; top: 50%; width: 1rem; height: 1px; background-color: var(--color-border, #dde2e9);}
.yl-app .menu-item:first-child::before {top: 1rem;}
.yl-app .menu-item-content {display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: var(--color-bg-5, #f1f3f5); border-radius: 6px; border: 1px solid var(--color-border, #dde2e9); transition: all 0.2s ease; gap: 0.75rem;}
.yl-app .menu-item-content:hover {background-color: var(--color-bg-5, #f1f3f5); border-color: var(--color-primary, #1664ff);}
.yl-app .menu-item-info {display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0;}
.yl-app .toggle-children {cursor: pointer; color: var(--color-text-2, #42464e); padding: 0.25rem; opacity: 0.6; transition: all 0.2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;}
.yl-app .toggle-children:hover {opacity: 1; color: var(--color-primary, #1664ff);}
.yl-app .toggle-children i {transition: transform 0.2s; font-size: 0.75rem;}
z-index: 10; pointer-events: auto; .yl-app .menu-drag-handle {cursor: move; color: var(--color-text-2, #42464e); padding: 0.25rem; opacity: 0.6; transition: opacity 0.2s; flex-shrink: 0; position: relative;}
.yl-app .menu-item-icon {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 6px; border: 1px solid var(--color-border, #dde2e9); color: var(--color-primary, #1664ff); font-size: 1.125rem; flex-shrink: 0;}
.yl-app .menu-item-name {font-weight: 600; color: var(--color-text-1, #0c0d0e); font-size: 0.95rem; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .menu-item-url {font-size: 0.75rem; color: var(--color-text-2, #42464e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem;}
.yl-app .menu-module-tag {display: inline-block; font-size: 0.7rem; padding: 0.125rem 0.5rem; background-color: rgba(78, 115, 223, 0.1); color: var(--color-primary, #1664ff); border-radius: 4px; white-space: nowrap;}
.yl-app .menu-module-tag.module-empty {background-color: rgba(108, 117, 125, 0.1); color: var(--color-text-2, #42464e);}
.yl-app .menu-item-actions {display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;}
.yl-app .action-btn {width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0;}
.yl-app .save-order-container {margin-top: 1rem; padding: 1rem; background-color: var(--color-bg-5, #f1f3f5); border-radius: 6px; border: 1px solid var(--color-border, #dde2e9);}
.yl-app .sort-notice, .yl-app .teacher-col-qualification, .yl-app .contact-info, .yl-app .status-tag-text.status-tag-neutral {color: var(--color-text-2, #42464e);}
.yl-app .sortable-ghost {opacity: 0.5; background: #c8ebfb;}
.yl-app .sortable-chosen {background-color: #e6f7ff;}
.yl-app .sortable-drag {opacity: 1; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.yl-app .sortable-fallback {opacity: 0.8; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.yl-app .sortable-placeholder {background-color: #e6f7ff; border: 1px dashed var(--color-primary, #1664ff); height: 60px; margin: 5px 0; border-radius: 6px;}
.yl-app .icon-picker-btn {display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background-color: var(--color-bg-5, #f1f3f5); border: 1px solid var(--color-border, #dde2e9); border-radius: 6px; color: var(--color-text-2, #42464e); cursor: pointer; transition: all 0.2s; margin-top: 0.5rem;}
.yl-app .icon-picker-btn:hover, .yl-app #staffSelectModal .dropdown-item:hover, .yl-app #staffSelectModal .dropdown-item:focus {background-color: var(--color-bg-5, #f1f3f5); color: var(--color-primary, #1664ff);}
.icon-picker-content {background-color: #fff; border-radius: 10px; width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);}
.icon-picker-header {display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border, #dde2e9);}
.icon-picker-header h5 {margin: 0; color: var(--color-text-1, #0c0d0e);}
.icon-picker-search {padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border, #dde2e9);}
.icon-picker-body {padding: 1.5rem; overflow-y: auto; flex: 1;}
.icon-picker-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 0.75rem;}
.icon-picker-item {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg-5, #f1f3f5); border: 1px solid var(--color-border, #dde2e9); border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 1.25rem; color: var(--color-text-2, #42464e);}
.icon-picker-item:hover {background-color: rgba(78, 115, 223, 0.1); border-color: var(--color-primary, #1664ff); color: var(--color-primary, #1664ff);}
.icon-picker-item.selected {background-color: rgba(78, 115, 223, 0.2); border-color: var(--color-primary, #1664ff); color: var(--color-primary, #1664ff);}
.icon-picker-footer {display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--color-border, #dde2e9);}
.yl-app .table tbody tr:hover, .yl-app .staff-search-item:hover, .yl-app .staff-search-item.active, .yl-app .course-search-dropdown .dropdown-content div:hover, .yl-app #recruitmentTeacherSuggestions div:hover, .yl-app .client-type-filter:hover:not(.active), .yl-app .client-item:hover, .yl-app .service-item-row:hover, .yl-app .contract-row:hover, .yl-app .backup-item:hover, .yl-app .search-modal-item:hover {background-color: var(--color-bg-5, #f1f3f5);}
.yl-app .claim-details-table {table-layout: fixed; width: 100%; min-width: 820px; border: 0;}
.yl-app .claim-details-table > tbody > tr > td:first-child {text-align: center; white-space: nowrap; color: var(--color-text-2, #42464e);}
.yl-app .claim-details-table .td-review {text-align: center; vertical-align: middle;}
.yl-app .claim-details-table.person-table > thead > tr > th:first-child {width: auto;}
.yl-app .claim-details-table.person-table > tbody > tr > td:first-child {text-align: left; white-space: normal;}
.yl-app .claim-info-title {display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--color-text-1, #0c0d0e); margin: 0 0 14px;}
.yl-app .claim-info-bar {width: 3px; height: 14px; border-radius: 2px; background: var(--color-primary, #1664ff); flex-shrink: 0;}
.yl-app .claim-info-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 28px;}
.yl-app .claim-info-item {display: flex; flex-direction: column; gap: 5px; min-width: 0;}
.yl-app .claim-info-item-full {grid-column: 1 / -1;}
.yl-app .claim-info-value {font-size: 14px; font-weight: 500; color: var(--color-text-1, #0c0d0e); word-break: break-all;}
.yl-app .claim-info-value.is-primary, .yl-app #staffSelectModal .modal-title {color: var(--color-primary, #1664ff); font-weight: 600;}
.yl-app .claim-info-records {margin-top: 2px; color: var(--color-text-2, #42464e); font-size: 13px; line-height: 1.7;}
.yl-app .claim-info-section {padding: 18px 20px;}
.yl-app .claim-info-section + .claim-info-section {border-top: 1px solid var(--color-border-2, #eef0f3);}
.yl-app .claim-audit-section {background: var(--color-bg-2, #f7f9fc);}
.yl-app .claim-stats-head {display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;}
.yl-app .claim-stats-title {font-size: 15px; font-weight: 600; color: var(--color-text-1, #0c0d0e);}
.yl-app .claim-stats-hint {font-size: 12px; color: var(--color-text-3, #737a87);}
.yl-app .vc-stats .vc-stat-sub {font-size: 12px; color: var(--color-text-3, #737a87); margin-top: 2px;}
.yl-app .claim-audit-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 12px;}
.yl-app .vc-stats .vc-stat-label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .empty-row i {font-size: 3rem; color: var(--color-text-2, #42464e); opacity: 0.5;}
.yl-app .action-btn-group .btn i, .yl-app .btn-group .btn i {font-size: 0.875rem;}
.yl-app .serial-cell {text-align: center; padding: 8px 4px;}
.yl-app .serial-number {text-align: center; color: var(--color-text-2, #42464e); font-weight: 500;}
.yl-app #claimItemsTable .image-upload-area, .yl-app #claimItemsTable .image-upload-container {min-height: 0; min-width: 0;}
.yl-app .operation-item-col-flight-charts .image-upload-area, .yl-app .operation-item-col-operation-photos .image-upload-area {min-height: 0; min-width: 0; width: 100%;}
.yl-app .auto-close-alert {position: relative; overflow: hidden; border-left: 4px solid;}
.yl-app .auto-close-alert::after {content: ''; position: absolute; bottom: 0; left: 0; height: 4px; background-color: rgba(0, 0, 0, 0.1); animation: progressBar 5s linear forwards;}
.yl-app .alert-danger {border-left-color: var(--color-danger, #d7312a);}
.yl-app .alert-success {border-left-color: var(--color-success, #2a814b);}
@keyframes progressBar {
0% {width: 100%;}
100% {width: 0%;}
}
.yl-app .data-table td.vc-audit-info {font-size: 12px; line-height: 1.55; color: var(--color-text-secondary, #6b7280); white-space: normal; word-break: break-word; vertical-align: top;}
.yl-app #advanceTable.data-table {table-layout: fixed; width: 100%; min-width: 1560px;}
.yl-app #advanceTable.data-table .table-actions, .yl-app .btn-group .btn span, .yl-app .batch-actions .btn, .yl-app #clientAttachmentsModal .attachments-grid .attachment-actions .btn, .yl-app #attachmentsList .attachments-grid .attachment-actions .btn, .yl-app #attachmentsModal .attachments-grid .attachment-actions .btn {white-space: nowrap;}
@media (max-width: 768px) {
.yl-app .action-btn-group {flex-direction: column;}
.yl-app .menu-item-content {flex-direction: column; align-items: flex-start; gap: 0.75rem;}
.yl-app .menu-item-actions {width: 100%; justify-content: flex-end;}
}
.yl-app .list-col {display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-1, #0c0d0e);}
.yl-app .list-col-serial, .yl-app .teacher-col-serial, .yl-app .item-col-serial, .yl-app .navigation-col-serial {justify-content: center; color: var(--color-text-2, #42464e);}
.yl-app .list-col-name, .yl-app .pilots-container .list-col-name, .yl-app .teachers-container .list-col-name, .yl-app #clientAttachmentsModal .attachments-grid .attachment-details strong, .yl-app #attachmentsList .attachments-grid .attachment-details strong, .yl-app #attachmentsModal .attachments-grid .attachment-details strong {font-weight: 600;}
.yl-app .list-col-actions {display: flex; gap: 0.25rem; justify-content: flex-start; flex-wrap: nowrap;}
.yl-app .list-header {background: var(--color-bg-2, #f1f3f8); border-bottom: 1px solid var(--color-border, #dde2e9);}
.yl-app .list-header .list-col {font-weight: 600; color: var(--color-text-2, #42464e);}
.yl-app .pilots-container, .yl-app .teachers-container {display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; max-width: 100%; background: transparent;}
.yl-app .pilots-container .list-col-experience, .yl-app .teachers-container .list-col-experience, .yl-app .teacher-col-experience {font-weight: 700; color: var(--color-primary, #1664ff);}
.yl-app .pilots-container .list-col-badges, .yl-app .teachers-container .list-col-badges, .yl-app .teacher-col-badges {display: flex; flex-wrap: wrap; gap: 0.25rem; overflow: hidden;}
.yl-app .pilots-container .list-col-description, .yl-app .teachers-container .list-col-description {white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; color: var(--color-text-1, #0c0d0e); font-size: var(--font-size-sm);}
.yl-app .teachers-container .list-col-title, .yl-app .teacher-col-title, .yl-app .teacher-col-direction, .yl-app .item-col-simple-part-number, .yl-app .item-col-applicable-model, .yl-app .item-col-product-series, .yl-app .item-col-material-attribute, .yl-app .item-col-material-usage, .yl-app .filter-dropdown .fd-arrow-btn:hover {color: var(--color-text-1, #0c0d0e);}
.yl-app .teacher-list-wrapper {width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; background: transparent;}
.yl-app .teacher-row, .yl-app .service-card, .yl-app .item-card, .yl-app .navigation-card {background: white; transition: background 0.15s ease; position: relative; width: 100%; max-width: 100%; box-sizing: border-box;}
.yl-app .teacher-row::after, .yl-app .service-card::after, .yl-app .item-card::after, .yl-app .navigation-card::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--color-border, #dde2e9);}
.yl-app .teacher-row:hover, .yl-app .teacher-header:hover, .yl-app .item-header:hover, .yl-app .service-card:hover, .yl-app .item-card:hover, .yl-app .navigation-card:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="draft"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="inactive"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="not_delivered"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="no_invoice"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="no_nameplate"]:hover, .yl-app .filter-status-btns .status-filter-btn.status-draft:hover, .yl-app .filter-status-btns .status-filter-btn.status-inactive:hover, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="not_delivered"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="no_invoice"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="no_nameplate"]:hover {background: var(--color-bg-5, #f1f3f5);}
.yl-app .teacher-header, .yl-app .item-header {background: var(--color-bg-5, #f1f3f5); position: relative;}
.yl-app .teacher-header::after, .yl-app .item-header::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--color-border, #dde2e9);}
.yl-app .teacher-header .teacher-col, .yl-app .item-header .item-col {font-weight: 600; color: var(--color-text-1, #0c0d0e); font-size: 0.875rem;}
.yl-app .teacher-row-main {display: grid; grid-template-columns: 50px minmax(100px, 1fr) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(80px, 0.8fr) minmax(100px, 1fr) minmax(150px, 1.5fr) minmax(120px, 1.2fr); align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; font-size: 0.9375rem; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box;}
.yl-app .teacher-col {display: flex; align-items: center; gap: 0.25rem; white-space: nowrap;}
.yl-app .teacher-col-name, .yl-app .navigation-list .list-col-title, .yl-app .navigation-col-title {font-weight: 600; gap: 0.375rem;}
.yl-app .teacher-col-name i {color: #667eea; flex-shrink: 0;}
.yl-app .teacher-col-actions {display: flex; gap: 0.25rem; justify-content: flex-start; flex-shrink: 0; flex-wrap: nowrap; position: relative; z-index: 10;}
.yl-app .teacher-col-actions .btn i, .yl-app .item-col-actions .btn i {margin-right: 0.125rem;}
.yl-app .teacher-col-actions a.btn:hover {text-decoration: none;}
.yl-app .empty-teachers, .yl-app .empty-items {text-align: center; padding: 3rem 1rem; color: var(--color-text-2, #42464e); width: 100%; max-width: 100%;}
.yl-app .empty-teachers i, .yl-app .empty-items i {font-size: 4rem; color: var(--color-border, #dde2e9);}
.yl-app .empty-teachers h5, .yl-app .empty-items h5 {font-size: 1.25rem; margin-bottom: 0.5rem;}
.yl-app .empty-teachers p, .yl-app .empty-items p {font-size: 0.875rem; margin-bottom: 0;}
.yl-app #changeStaffBtn {transition: all 0.3s ease; font-weight: 500;}
.yl-app #changeStaffBtn:hover {transform: translateY(-1px); box-shadow: 0 4px 8px rgba(78, 115, 223, 0.2);}
.yl-app #changeStaffBtn:active, .yl-app .vc-modal-mask.is-open .vc-modal, .vc-modal-mask.is-open .vc-modal {transform: translateY(0);}
.yl-app #currentStaffInfo {transition: opacity 0.3s ease;}
.yl-app #staffSelectModal {z-index: 999999 !important;}
.yl-app #staffSelectModal .input-group-text {background-color: var(--color-bg-5, #f1f3f5); border-color: #d1d3e2;}
.yl-app #staffSelectModal .form-control:focus {border-color: var(--color-primary, #1664ff); box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);}
.yl-app #staffSelectModal .dropdown-menu {width: 100% !important; max-width: 100% !important; min-width: 0 !important; max-height: 300px; overflow-y: auto; overflow-x: hidden; border-radius: 0.35rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border: 1px solid #d1d3e2; margin-top: 2px; z-index: 1060; box-sizing: border-box;}
.yl-app #staffSelectModal .dropdown-item {padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border, #dde2e9); transition: all 0.2s ease;}
.yl-app #staffSelectModal .alert-info {background-color: #e7f1ff; border-color: #b6d4fe; color: var(--color-primary-7, #0e42d2); font-size: 0.875rem;}
.yl-app #staffSelectModal .alert-info i {font-size: 1.2rem;}
@keyframes radio-pulse {
0% {transform: scale(0.8);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.yl-app .is-valid {border-color: var(--color-success, #2a814b) !important; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;}
.yl-app .image-upload-area {min-width: 130px; min-height: 130px; width: 100%; max-width: 100%; flex-shrink: 0;}
.yl-app .photo-options {margin-top: 10px;}
.yl-app .photo-upload-container {margin-top: 15px; position: relative;}
.yl-app .photo-upload-area {border: 2px dashed var(--color-border, #dde2e9); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background-color: var(--color-bg-5, #f1f3f5); width: 150px; height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; position: relative; overflow: hidden;}
.yl-app .photo-upload-area::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(78, 115, 223, 0.05) 25%, transparent 25%, transparent 75%, rgba(78, 115, 223, 0.05) 75%), linear-gradient(45deg, rgba(78, 115, 223, 0.05) 25%, transparent 25%, transparent 75%, rgba(78, 115, 223, 0.05) 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; opacity: 0; transition: opacity 0.3s ease;}
.yl-app .photo-upload-icon {font-size: 2.5rem; color: var(--color-primary, #1664ff); margin-bottom: 15px; transition: all 0.3s ease;}
.yl-app .photo-preview-container {display: flex; flex-wrap: wrap; gap: 15px; margin: 0 auto; justify-content: center; position: relative; border: 2px dashed var(--color-border, #dde2e9); border-radius: 12px; overflow: hidden; text-align: center; width: 150px; height: 210px; background-color: var(--color-bg-5, #f1f3f5);}
.yl-app .photo-preview-img {width: 100%; height: 100%; object-fit: cover;}
.yl-app .photo-preview-actions {position: absolute; top: 0; right: 0; padding: 8px; display: flex; flex-direction: column; gap: 5px;}
.yl-app .photo-preview-actions button {width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: rgba(0, 0, 0, 0.6); border: none; color: white; cursor: pointer; border-radius: 50%; transition: all 0.2s ease;}
.yl-app .photo-preview-actions button:hover {background: rgba(0, 0, 0, 0.8); transform: scale(1.1);}
.yl-app .photo-delete-btn {color: #fff; background: var(--color-danger, #d7312a); border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px;}
.yl-app .photo-delete-btn:hover {background: var(--color-danger, #d7312a); transform: translateY(-2px); box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);}
.yl-app .photo-delete-btn i, .yl-app .client-type-btn i {font-size: 0.9rem;}
.yl-app .drag-over {border-color: var(--color-primary, #1664ff); background-color: #e7f1ff;}
.yl-app .staff-suggestion-item {cursor: pointer; transition: all 0.2s ease; padding: 0.75rem !important;}
.yl-app .staff-suggestion-item:hover {background-color: #e7f1ff;}
.yl-app .staff-suggestion-item.active {background-color: var(--color-primary, #1664ff);}
.yl-app #selectedStaffInfo {animation: fadeIn 0.3s ease;}
@keyframes fadeIn {
from {opacity: 0; transform: translateY(-10px);}
to {opacity: 1; transform: translateY(0);}
}
.yl-app .employee-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px;}
.yl-app .employee-avatar-sm {width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.yl-app .employee-info {display: flex; align-items: center; gap: 15px;}
.yl-app .employee-name {font-size: 18px; font-weight: 600; margin-bottom: 5px; color: #333;}
.yl-app .employee-role {font-size: 14px; color: #666; margin-bottom: 8px;}
.yl-app .employee-actions {display: flex; justify-content: flex-end; gap: 10px; padding: 15px; background-color: var(--color-bg-5, #f1f3f5); border-top: 1px solid #e0e0e0;}
.yl-app .employee-introduction {font-size: 12px; color: #666; line-height: 1.4;}
.yl-app .teacher-qualification {background-color: #e6f3ff; padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; border-left: 4px solid #007bff;}
.yl-app .teacher-introduction {background-color: var(--color-bg-5, #f1f3f5); padding: 10px 12px; border-radius: 4px; margin-bottom: 10px; font-size: 0.9rem; color: var(--color-text-1, #0c0d0e); border-left: 4px solid var(--color-success, #2a814b);}
.yl-app #sidebar.collapsed ~ #main-content {margin-left: var(--sidebar-collapsed-width, 64px);}
@media (max-width: 992px) {
.yl-app .teacher-row-main {grid-template-columns: 50px minmax(90px, 1fr) minmax(100px, 1fr) minmax(90px, 1fr) minmax(70px, 0.8fr) minmax(90px, 1fr) minmax(120px, 1.2fr) minmax(100px, 1fr);}
}
@media (max-width: 768px) {
.yl-app .teacher-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; background: transparent !important;}
.yl-app .empty-teachers {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .empty-teachers i {font-size: 3rem;}
.yl-app .empty-teachers h5 {font-size: 1rem;}
.yl-app .teachers-container {display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0.25rem; box-sizing: border-box; background: transparent;}
.yl-app .teacher-header, .yl-app .teacher-row::after {display: none;}
.yl-app .teacher-row {border: 1px solid var(--color-border, #dde2e9); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; background: white;}
.yl-app .teacher-row-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; min-height: auto; grid-template-columns: none !important; background: transparent;}
.yl-app .teacher-col {flex: none; width: auto; padding: 0.5rem 0.25rem; background: transparent;}
.yl-app .teacher-col-serial {order: 1; width: 15%; display: flex; color: var(--color-text-2, #42464e); font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-name {order: 2; width: 85%; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-title {order: 3; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-title::before {content: '职称：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-qualification {order: 4; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-qualification::before {content: '资质：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-experience {order: 5; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-experience::before {content: '飞行经验：'; color: var(--color-text-2, #42464e); font-weight: normal;}
.yl-app .teacher-col-experience::after {content: '年'; color: var(--color-text-2, #42464e); font-weight: normal;}
.yl-app .teacher-col-direction {order: 6; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-direction::before {content: '教学方向：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-badges {order: 7; width: 100%; padding: 0.5rem 0.25rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-actions {order: 8; width: 100%; min-width: auto; padding-top: 0.5rem; border-top: 1px solid #eee; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem;}
.yl-app .teacher-col-actions .btn i {margin-right: 0.1rem; font-size: 0.7rem;}
}
@media (max-width: 575.98px) {
.yl-app .teacher-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; background: transparent !important;}
.yl-app .empty-teachers {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .teachers-container {padding: 0.5rem 0.25rem; background: transparent;}
.yl-app .teacher-row {border-radius: 6px;}
.yl-app .teacher-row-main {padding: 0.5rem;}
}
@media print {
.yl-app .teacher-row {break-inside: avoid; box-shadow: none; border: 1px solid #000;}
}
@media (min-width: 769px) {
.yl-app .pc-col-align-keywords, .yl-app .pc-col-align-start-date {padding-left: 0 !important;}
}
.yl-app .status-filter-wrapper {display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}
.yl-app .course-search-dropdown, .yl-app #recruitmentTeacherSuggestions {position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background-color: white; border: 1px solid var(--color-border, #dde2e9); border-top: none; border-radius: 0 0 0.25rem 0.25rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; display: none;}
.yl-app .course-search-dropdown .dropdown-header, .yl-app #recruitmentTeacherSuggestions .dropdown-header {padding: 0.5rem 0.75rem; background-color: var(--color-bg-5, #f1f3f5); font-weight: 500; font-size: 0.875rem; border-bottom: 1px solid var(--color-border, #dde2e9);}
.yl-app .course-search-dropdown .dropdown-content div, .yl-app #recruitmentTeacherSuggestions div {padding: 0.375rem 0.75rem; cursor: pointer; font-size: 0.875rem;}
.yl-app .services-list-wrapper, .yl-app .service-item-list-wrapper {width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden;}
.yl-app .services-container, .yl-app .items-container {display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; max-width: 100%;}
.yl-app .empty-services {text-align: center; padding: 3rem 1rem; color: var(--color-text-2, #42464e); width: 100%; max-width: 100%; box-sizing: border-box;}
.yl-app .empty-services i {font-size: 3rem; opacity: 0.3;}
.yl-app .empty-services p {margin-top: 0.5rem; font-size: 0.875rem;}
.yl-app .service-header {background-color: var(--color-bg-5, #f1f3f5); border-bottom: 2px solid var(--color-border, #dde2e9); font-weight: 600; color: var(--color-text-2, #42464e);}
.yl-app .service-col {padding: 0.5rem; font-size: 0.9375rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
.yl-app .service-col-header {font-weight: 600; color: var(--color-text-2, #42464e); text-transform: uppercase; font-size: 0.75rem;}
.yl-app .service-col-serial {color: var(--color-text-2, #42464e); font-size: 0.875rem; justify-content: center;}
.yl-app .service-col-no {font-weight: 600; color: var(--color-primary-5, #4080ff); font-size: 0.95rem;}
.yl-app .service-no {font-family: 'Consolas', 'Monaco', monospace; letter-spacing: 0.5px;}
.yl-app .service-col-client {color: #1a1a1a; font-weight: 500; font-size: 0.9rem;}
.yl-app .service-col-battery {color: var(--color-text-1, #0c0d0e); font-size: 0.9rem;}
.yl-app .service-col-type, .yl-app .filter-bar--task .search-field-input::placeholder, .yl-app .filter-bar--task .filter-field .filter-input::placeholder, .yl-app .filter-bar--task .search-field input::placeholder, .yl-app .filter-status-btns .status-filter-btn[data-status="draft"], .yl-app .filter-status-btns .status-filter-btn[data-status="inactive"], .yl-app .filter-status-btns .status-filter-btn[data-status="not_delivered"], .yl-app .filter-status-btns .status-filter-btn[data-status="no_invoice"], .yl-app .filter-status-btns .status-filter-btn[data-status="no_nameplate"], .yl-app .filter-status-btns .status-filter-btn.status-draft, .yl-app .filter-status-btns .status-filter-btn.status-inactive, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="not_delivered"], .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="no_invoice"], .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="no_nameplate"], .yl-app .filter-dropdown .fd-input::placeholder, .yl-app .data-table.pbx-list-table tbody tr.is-muted td {color: var(--color-text-3, #737a87);}
.yl-app .service-col-status, .yl-app .item-col-checkbox {justify-content: center;}
.yl-app .service-col-date, .yl-app .item-col-created-at {color: var(--color-text-2, #42464e); font-size: 0.875rem;}
.yl-app .service-col-actions {justify-content: flex-end; gap: 0.5rem;}
.yl-app .btn-view:hover {background-color: var(--color-info, #1f93c8); border-color: #117a8b; color: #fff;}
.yl-app .btn-edit:hover {background-color: #e0a800; border-color: #d39e00; color: #000;}
.yl-app .btn-delete:hover {background-color: var(--color-danger, #d7312a); border-color: #bd2130; color: #fff;}
.yl-app .action-buttons {display: inline-flex; gap: 0.35rem;}
.yl-app .action-buttons .btn-sm i, .dropdown-profile-avatar .avatar-text {font-size: 0.85rem;}
.yl-app .battery-code-info {display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; background-color: rgba(13, 202, 240, 0.1); border-radius: 4px; cursor: pointer; transition: all 0.2s;}
.yl-app .battery-code-info:hover {background-color: rgba(13, 202, 240, 0.2);}
.yl-app .battery-code-info i {color: var(--color-info, #1f93c8); font-size: 1rem;}
.yl-app .empty-services {text-align: center; padding: 3rem 2rem; color: var(--color-text-2, #42464e); background-color: var(--color-bg-5, #f1f3f5); border-radius: 8px; margin: 1rem;}
.yl-app .empty-services i {font-size: 4rem; color: var(--color-text-3, #737a87); margin-bottom: 1rem;}
.yl-app .empty-services h5 {color: var(--color-text-1, #0c0d0e); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1rem;}
.yl-app .empty-services p {font-size: 0.9rem; margin-bottom: 0; color: var(--color-text-2, #42464e);}
.yl-app .client-row {display: flex; align-items: center; gap: 0.4rem; line-height: 1.4;}
.yl-app .client-name {font-weight: 500; color: var(--color-text-1, #0c0d0e); font-size: 0.88rem;}
.yl-app .phone-info {color: var(--color-text-3, #737a87); font-size: 0.85rem;}
.yl-app .client-info-item {display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem;}
.yl-app .client-info-label {font-size: 0.75rem; color: var(--color-text-2, #42464e); font-weight: 500;}
.yl-app .client-info-value {font-size: 0.875rem; color: var(--color-text-1, #0c0d0e); font-weight: 600;}
.yl-app .client-search-header, .yl-app .search-modal-header {display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--color-bg-5, #f1f3f5); margin-bottom: 1rem;}
.yl-app .client-search-actions {display: flex; gap: 0.5rem; align-items: center;}
.yl-app .client-type-filter {font-size: 0.875rem; padding: 0.375rem 0.75rem; transition: all 0.2s;}
.yl-app .client-type-filter.active {background-color: var(--color-primary, #1664ff); border-color: var(--color-primary, #1664ff); color: white;}
.yl-app .client-list-container, .yl-app .search-modal-container {max-height: 400px; overflow-y: auto; border: 1px solid var(--color-bg-5, #f1f3f5); border-radius: 8px; padding: 0.5rem;}
.yl-app .client-item, .yl-app .search-modal-item {display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--color-bg-5, #f1f3f5); transition: background-color 0.2s;}
.yl-app .client-checkbox, .yl-app .search-modal-checkbox {margin-right: 1rem;}
.yl-app .client-info {display: flex; flex-direction: column; flex: 1; gap: 0.2rem;}
.yl-app .client-name, .yl-app .search-modal-name {font-weight: 600; color: var(--color-text-1, #0c0d0e); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem;}
.yl-app .client-details, .yl-app .search-modal-details {display: flex; gap: 1rem; font-size: 0.875rem; color: var(--color-text-2, #42464e);}
.yl-app .service-item-row {transition: all 0.2s;}
.yl-app .service-item-checkbox, .yl-app .searchable-select .ss-trigger[readonly] {cursor: pointer;}
.yl-app .action-btn-group {display: flex; gap: 0.25rem; justify-content: center;}
.yl-app .client-detail, .yl-app .search-modal-detail {display: flex; align-items: center; gap: 0.25rem;}
.yl-app .client-action, .yl-app .search-modal-action {margin-left: 1rem;}
.yl-app .empty-row i {font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 1rem;}
.yl-app .empty-row p {margin: 0; font-size: 0.9rem;}
.yl-app .item-header .item-col-serial, .yl-app .item-header .item-col-part-number {min-height: 36px; justify-content: center; align-items: center; flex-direction: column; white-space: normal; overflow: visible;}
.yl-app .item-col, .yl-app .navigation-col {display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .item-col-part-number i {flex-shrink: 0;}
.yl-app .item-col-product-name {color: var(--color-primary-5, #4080ff); font-weight: 600;}
.yl-app .item-col-unit {justify-content: center; color: var(--color-text-1, #0c0d0e);}
.yl-app .item-col-local-repair-price {justify-content: center; color: var(--color-primary-5, #4080ff); font-weight: 600;}
.yl-app .item-col-actions {display: flex; gap: 0.25rem; justify-content: flex-start; flex-shrink: 0; flex-wrap: wrap;}
.yl-app .select-all-container {display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 0 0.75rem;}
.yl-app .batch-actions-wrapper {background: linear-gradient(135deg, var(--color-bg-5, #f1f3f5) 0%, var(--color-bg-5, #f1f3f5) 100%); padding: 1rem 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); border: 1px solid var(--color-border, #dde2e9);}
.yl-app .batch-actions {display: none !important; align-items: center; gap: 0.75rem;}
.yl-app .batch-info {font-weight: 600; color: var(--color-primary, #1664ff); font-size: 0.9rem; padding: 0.375rem 0.75rem; background-color: rgba(13, 110, 253, 0.1); border-radius: 20px;}
.yl-app .client-type-toggle {display: flex; align-items: center; gap: 1rem;}
.yl-app .client-type-group {display: inline-flex; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.yl-app .client-type-btn {padding: 0.5rem 1.25rem; font-weight: 500; transition: all 0.2s ease; border: 1px solid var(--color-primary, #1664ff); background-color: #fff; color: var(--color-primary, #1664ff);}
.yl-app .client-type-btn:hover {background-color: #f0f7ff; color: var(--color-primary, #1664ff);}
.yl-app .client-type-btn.active {background-color: var(--color-primary, #1664ff); color: #fff; border-color: var(--color-primary, #1664ff);}
.yl-app #company-form, .yl-app #individual-form {padding-top: 0.5rem;}
.yl-app .required-label::after {content: '*'; color: var(--color-danger, #d7312a); margin-left: 0.25rem;}
.yl-app .stock-status {display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;}
.yl-app .stock-danger {background-color: #ffebee; color: #c62828;}
.yl-app .stock-warning {background-color: #fff3e0; color: #e65100;}
.yl-app .stock-normal {background-color: #e8f5e9; color: #2e7d32;}
.yl-app .outbound-items-table, .yl-app .inbound-items-table {width: 100%; margin-bottom: 0;}
.yl-app .outbound-item-total, .yl-app .inbound-item-total {margin-top: 15px; padding: 15px; background-color: var(--color-bg-5, #f1f3f5); border-radius: 8px; border: 1px solid var(--color-border, #dde2e9);}
.yl-app .outbound-item-total strong, .yl-app .inbound-item-total strong {color: var(--color-text-1, #0c0d0e); font-size: 0.875rem;}
.yl-app .outbound-item-total span, .yl-app .inbound-item-total span {color: var(--color-primary-5, #4080ff); font-weight: 600; font-size: 0.9375rem;}
.yl-app .action-buttons {display: flex; gap: 5px; justify-content: center;}
.yl-app .required-label::after {content: ' *'; color: var(--color-danger, #d7312a);}
.yl-app .contracts-container, .yl-app .financial-list-wrapper {display: block; width: 100%;}
.yl-app .contract-row {display: flex; align-items: center; padding: 0.625rem 0.75rem; font-size: 0.9375rem; min-height: 44px; width: 100%; box-sizing: border-box; background-color: white; border-bottom: 1px solid var(--color-border, #dde2e9);}
.yl-app .contract-header.contract-row {background-color: var(--color-bg-5, #f1f3f5); font-weight: 600; border-bottom: 2px solid var(--color-border, #dde2e9);}
.yl-app .contract-col {display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.25rem 0;}
.yl-app .contract-col-checkbox {width: 35px; min-width: 35px; max-width: 35px; flex: 0 0 35px;}
.yl-app .contract-col-serial {width: 45px; min-width: 45px; max-width: 45px; flex: 0 0 45px;}
.yl-app .contract-col-part-number {width: 12%; min-width: 120px;}
.yl-app .contract-col-simple-part-number {width: 10%; min-width: 100px;}
.yl-app .contract-col-product-name {width: 13%; min-width: 110px;}
.yl-app .contract-col-applicable-model {width: 11%; min-width: 90px;}
.yl-app .contract-col-product-series {width: 7%; min-width: 65px;}
.yl-app .contract-col-unit {width: 6%; min-width: 50px;}
.yl-app .contract-col-material-attribute, .yl-app .contract-col-material-usage {width: 9%; min-width: 85px;}
.yl-app .contract-col-local-repair-price {width: 7%; min-width: 70px;}
.yl-app .contract-col-created-at {width: 10%; min-width: 120px;}
.yl-app .contract-col-actions {width: 110px; min-width: 110px; max-width: 110px; flex: 0 0 110px; display: flex; gap: 0.5rem; justify-content: flex-start; flex-shrink: 0; flex-wrap: nowrap; align-items: center; min-height: 44px; padding: 0.25rem 0;}
.yl-app .contract-col-actions .action-btns .btn[data-bs-target="#viewItemModal"] {background-color: var(--color-primary, #1664ff) !important; border-color: var(--color-primary, #1664ff) !important;}
.yl-app .contract-col-actions .action-btns .btn[data-bs-target="#viewItemModal"]:hover {background-color: #0b5ed7 !important; border-color: #0b5ed7 !important;}
.yl-app .contract-col-actions .action-btns .btn.edit-item, .yl-app .contract-col-actions .action-btns .btn.edit-item:hover {background-color: var(--color-success, #2a814b) !important; border-color: var(--color-success, #2a814b) !important;}
.yl-app .contract-col-actions .action-btns .btn span {font-size: 0.7rem !important;}
minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%); @media (max-width: 1400px) {}
minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%); @media (max-width: 992px) {}
minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%); @media (max-width: 768px) {}
.yl-app .contract-col-actions .action-btns .btn i {font-size: 0.875rem !important;}
.yl-app .contract-col-actions .action-btns .btn span {font-size: 0.65rem !important;}
minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%); @media (max-width: 576px) {}
.yl-app .contract-col-actions .action-btns .btn i {font-size: 0.75rem !important;}
.yl-app .contract-col-actions .action-btns .btn span {display: none;}
@media (max-width: 768px) {
.yl-app .outbound-item-total, .yl-app .inbound-item-total {padding: 10px;}
}
@keyframes ylModalFade {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes ylModalPop {
from {opacity: 0; transform: translateY(10px) scale(0.985);}
to {opacity: 1; transform: translateY(0) scale(1);}
}
.yl-app .table-header {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--primary, #1664ff); color: #fff; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;}
.yl-app .table-header h6 {color: #fff; font-weight: 600;}
.yl-app .navigation-form-label, .yl-app .payment-method-form-label, .yl-app .website-url-form-label {font-weight: 500; color: var(--text-color-text-regular, #1d2129);}
.yl-app .qr-placeholder {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--text-muted, #86909c);}
.yl-app .qrcode-preview {max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border-yuanliBorder-1, #eaedf1); object-fit: contain;}
.yl-app .claims-container {display: block; padding: 4px 0;}
.yl-app .stats-summary {display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; line-height: 1.5; font-size: 13px;}
.yl-app .filter-bar--task .filter-row--main > .stats-summary, .yl-app .data-table.pbx-list-table .pbx-status-col .status-tag {margin-left: auto;}
.yl-app .settings-container {background: var(--foundation-surface, #fff); border: 1px solid var(--border-yuanliBorder-1, #eaedf1); border-radius: var(--radius-lg, 12px); padding: 24px; box-shadow: var(--shadow-3, 0 8px 20px rgba(0,0,0,.08));}
.yl-app .editor-container {border: 1px solid var(--border-yuanliBorder-1, #eaedf1); border-radius: var(--radius-lg, 12px); overflow: hidden; background: var(--foundation-bg, #fff);}
.yl-app .submit-section {display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-yuanliBorder-1, #eaedf1);}
.yl-app .min-h-\[300px\] {min-height: 300px;}
.yl-app .embed-responsive {position: relative; display: block; width: 100%; padding: 0; overflow: hidden;}
.yl-app .embed-responsive::before {content: ""; display: block; padding-top: 56.25%;}
.yl-app .embed-responsive .embed-responsive-item, .yl-app .embed-responsive iframe, .yl-app .embed-responsive embed, .yl-app .embed-responsive video {position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.yl-app .embed-responsive-16by9::before {padding-top: 56.25%;}
.yl-app .current-logo {display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 12px; margin-bottom: 12px; border: 1px dashed var(--border-yuanliBorder-2, #e1e4e8); border-radius: var(--radius-lg, 12px); background: var(--foundation-surface-container, #f7f9fb);}
.yl-app .current-logo img {max-height: 80px; max-width: 100%; object-fit: contain;}
.yl-app .logo-upload-area {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border: 2px dashed var(--border-yuanliBorder-3, #d1d5da); border-radius: var(--radius-lg, 12px); background: var(--foundation-surface-container, #f7f9fb); color: var(--text-muted, #86909c); cursor: pointer; transition: all 150ms ease;}
.yl-app .logo-upload-area:hover {border-color: var(--primary, #1664ff); background: var(--primary-yuanliBlue-1, #f3f7ff);}
.yl-app .company-name {color: #1a1a1a; font-size: 0.92rem; font-weight: 600;}
.yl-app .copy-btn {cursor: pointer; color: var(--color-text-3, #86909c); font-size: inherit; transition: color 0.15s ease;}
.yl-app .copy-btn.copy-success {color: var(--color-success, #00b42a);}
.yl-app .records-wrapper {width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.yl-app .records-container {display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; min-width: 720px;}
.yl-app .records-wrapper .sales-contracts-grid {grid-template-columns: minmax(40px, 4%) minmax(120px, 14%) minmax(80px, 9%) minmax(70px, 9%) minmax(70px, 9%) minmax(80px, 10%) minmax(90px, 12%) minmax(120px, 33%) !important;}
.yl-app .records-wrapper .lease-contracts-grid {grid-template-columns: minmax(40px, 4%) minmax(120px, 14%) minmax(70px, 9%) minmax(80px, 10%) minmax(80px, 10%) minmax(110px, 14%) minmax(80px, 10%) minmax(110px, 29%) !important;}
.yl-app .records-wrapper .sales-out-grid {grid-template-columns: minmax(40px, 4%) minmax(120px, 16%) minmax(70px, 9%) minmax(80px, 11%) minmax(70px, 9%) minmax(70px, 9%) minmax(110px, 42%) !important;}
.yl-app .records-wrapper .training-grid {grid-template-columns: minmax(40px, 4%) minmax(100px, 16%) minmax(100px, 16%) minmax(100px, 14%) minmax(120px, 50%) !important;}
.yl-app .records-wrapper .list-col {color: #495057; font-size: var(--font-size-sm); white-space: normal; overflow: visible; line-height: 1.5; padding: 0.5rem 0.5rem; border-bottom: 1px solid #dee2e6;}
.yl-app .records-wrapper .list-header .list-col {font-weight: 600; color: #2d3653; background: #f1f3f8; border-bottom: 1px solid #dee2e6;}
.yl-app .records-wrapper .list-col-no {font-weight: 500; color: #2d3653;}
.yl-app .records-wrapper .list-col-amount {font-weight: 600; color: #2d3653;}
.yl-app .student-courses-box {background: #f8f9fc; border-left: 3px solid var(--primary, #1664ff); padding: 0.5rem 0.75rem; margin-top: 0.5rem; border-radius: 0.25rem;}
.yl-app .navigation-list .list-col-title i {color: var(--primary, #1664ff); flex-shrink: 0;}
.yl-app .qrcode-container {display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;}
.yl-app .qrcode-title {font-weight: 600; margin-bottom: 15px; color: var(--primary, #1664ff);}
.yl-app .qrcode-image {max-width: 200px; height: auto; margin: 0 auto; display: block;}
/* 社媒二维码列表（navigation_menus 第三标签） */
.yl-app .qrcode-thumb {width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--border-yuanliBorder-1, #eaedf1); border-radius: 8px; background: #f8f9fc; cursor: zoom-in; transition: box-shadow 150ms ease, transform 150ms ease;}
.yl-app .qrcode-thumb:hover {box-shadow: 0 4px 12px rgba(15, 23, 42, .12); transform: translateY(-1px);}
.yl-app .qr-empty {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px dashed var(--border-yuanliBorder-3, #d1d5da); border-radius: 8px; background: var(--foundation-surface-container, #f7f9fb); color: var(--text-muted, #86909c);}
/* 社媒二维码「图标」列（类型标识改为图标展示） */
.yl-app .qrcode-type-icon {font-size: 24px; line-height: 1; color: var(--primary, #1664ff); width: 40px; height: 40px; border-radius: 50%; background: rgba(22, 100, 255, .08); display: inline-flex; align-items: center; justify-content: center; transition: transform 150ms ease;}
.yl-app .qrcode-type-icon:hover {transform: translateY(-1px);}
.yl-app .qrcode-type-icon svg, .yl-app .qr-svg {width: 22px; height: 22px; display: block;}
.yl-app .qrcode-type-preview {font-size: 22px; line-height: 1; color: var(--primary, #1664ff); padding: 6px 8px; border-radius: 8px; background: rgba(22, 100, 255, .08); flex: 0 0 auto;}
/* 社媒二维码「类型」图标选择器（模态框内点选） */
.yl-app .qr-type-picker {display: flex; flex-wrap: wrap; gap: 10px;}
.yl-app .qr-type-option {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 84px; padding: 12px 10px; border: 1px solid var(--border-yuanliBorder-3, #d1d5da); border-radius: 8px; background: #fff; color: var(--text-color-text-regular, #1d2129); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;}
.yl-app .qr-type-option i, .yl-app .qr-type-option svg {font-size: 22px; line-height: 1; color: var(--text-muted, #86909c); transition: color 150ms ease;}
.yl-app .qr-type-option svg {width: 24px; height: 24px;}
.yl-app .qr-type-option span {font-size: 12px; line-height: 1;}
.yl-app .qr-type-option:hover {border-color: var(--primary, #1664ff);}
.yl-app .qr-type-option:hover i, .yl-app .qr-type-option:hover svg {color: var(--primary, #1664ff);}
.yl-app .qr-type-option.active {border-color: var(--primary, #1664ff); background: rgba(22, 100, 255, .06); box-shadow: inset 0 0 0 1px var(--primary, #1664ff);}
.yl-app .qr-type-option.active i, .yl-app .qr-type-option.active svg {color: var(--primary, #1664ff);}
.yl-app .qrcode-actions {margin-top: 15px; text-align: center;}
.yl-app .godown-container, .yl-app .types-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 25px; margin-top: 20px;}
.yl-app .godown-content, .yl-app .type-content {background-color: #f8f9fc; padding: 15px; border-radius: 5px; margin-bottom: 15px; flex-grow: 1;}
.yl-app .godown-name, .yl-app .type-name {font-weight: 600; margin-bottom: 10px; color: var(--primary, #1664ff);}
.yl-app .godown-description, .yl-app .type-description {color: var(--text-muted, #86909c); margin-bottom: 10px;}
.yl-app .godown-actions, .yl-app .type-actions {display: flex; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #eee;}
.yl-app .godown-list, .yl-app .type-list {padding: 15px; flex-grow: 1; overflow-y: auto;}
.yl-app .godown-item, .yl-app .type-item {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-yuanliBorder-1, #eaedf1);}
.yl-app .godown-item:last-child, .yl-app .type-item:last-child, .yl-app .info-item:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.yl-app .empty-godown, .yl-app .empty-type {text-align: center; padding: 30px; color: var(--text-muted, #86909c); flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.yl-app .empty-godown i, .yl-app .empty-type i, .yl-app .empty-business i {font-size: 3rem; opacity: 0.3; margin-bottom: 15px;}
.yl-app .godown-details {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px;}
.yl-app .godown-detail-item i {margin-right: 8px; color: var(--text-muted, #86909c);}
.yl-app .businesses-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-top: 20px;}
.yl-app .business-info, .yl-app .business-modal .modal-body, .yl-app .godown-modal .modal-body, .yl-app .type-modal .modal-body {padding: 1.5rem;}
.yl-app .business-info-item {display: flex; margin-bottom: 12px; align-items: flex-start;}
.yl-app .info-icon {min-width: 24px; margin-right: 12px; color: var(--primary, #1664ff);}
.yl-app .info-label {font-weight: 500; color: var(--text-color-text-regular, #1d2129); margin-bottom: 2px;}
.yl-app .info-value {color: var(--text-muted, #86909c);}
.yl-app .business-actions {padding: 15px; border-top: 1px solid var(--border-yuanliBorder-1, #eaedf1); display: flex; justify-content: flex-end; gap: 10px;}
.yl-app .empty-business {text-align: center; padding: 40px 20px; color: var(--text-muted, #86909c);}
.yl-app .detail-section {margin-bottom: 1.5rem;}
.yl-app .student-courses-box .course-item {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: var(--font-size-xs); border-bottom: 1px dashed var(--color-border, #dde2e9);}
.yl-app #clientAttachmentsModal .upload-form-container {border:1px solid var(--color-border, #dde2e9); border-radius: 8px; padding: 15px; margin-bottom: 20px; background-color:var(--color-bg-5, #f1f3f5);}
.yl-app #clientAttachmentsModal .upload-header {cursor: pointer; padding: 10px; background-color:var(--color-border, #dde2e9); border-radius: 6px; margin-bottom: 15px;}
.yl-app #clientAttachmentsModal .upload-form {transition: max-height 0.3s ease; overflow: hidden;}
.yl-app #clientAttachmentsModal .upload-form.collapsed {max-height: 0; overflow: hidden; padding: 0; margin: 0;}
.yl-app #imagePreviewModal {z-index: 1070 !important;}
.yl-app #importModal .import-list {margin-top: 12px; max-height: 360px; overflow-y: auto; border: 1px solid var(--color-border-2, #eaedf1); border-radius: 10px;}
.yl-app #importModal .import-list .data-table {margin: 0; font-size: 13px;}
.yl-app #importModal .import-list .empty-tip {text-align: center; color: var(--color-text-3, var(--color-text-3, #737a87)); padding: 44px 16px; font-size: 13px;}
.yl-app #importModal .import-list .empty-tip i {font-size: 28px; display: block; margin-bottom: 8px; color: var(--color-border-3, var(--color-border, #dde2e9));}
.yl-app .editor-wrapper {position: relative; border: 1px solid var(--color-border, #dde2e9); border-radius: 0.375rem; min-height: 400px;}
.yl-app .editor-toolbar {background-color: var(--color-bg-5, #f1f3f5); border-bottom: 1px solid var(--color-border, #dde2e9); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 5px; border-radius: 0.375rem 0.375rem 0 0;}
.yl-app .toolbar-group {display: flex; align-items: center; margin-right: 10px;}
.yl-app .toolbar-btn {background: white; border: 1px solid var(--color-border, #dde2e9); border-radius: 5px; padding: 4px 8px; margin-right: 3px; cursor: pointer; transition: all 0.2s; font-size: 14px;}
.yl-app .toolbar-btn:hover {background-color: var(--color-primary, #1664ff); color: white; border-color: var(--color-primary, #1664ff);}
.yl-app .toolbar-divider {width: 1px; background-color: var(--color-border, #dde2e9); margin: 0 8px; height: 20px; align-self: center;}
.yl-app .editor-content {padding: 15px; min-height: 350px; outline: none; overflow-y: auto; max-height: 600px; white-space: normal; background-color: white;}
.yl-app .color-palette {display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 10px;}
.yl-app .color-option {width: 20px; height: 20px; border-radius: 3px; cursor: pointer; border: 1px solid var(--color-border, #dde2e9); transition: transform 0.2s;}
.yl-app .color-option:hover {transform: scale(1.2);}
.yl-app .media-container {position: relative; margin: 10px 0; display: inline-block; max-width: 100%;}
.yl-app .media-preview {max-width: 100%; height: auto; border: 1px solid var(--color-border, #dde2e9); border-radius: 4px;}
.yl-app .media-caption {text-align: center; font-size: 12px; color: var(--color-text-2, #42464e); margin-top: 5px;}
.yl-app .editor-content:focus {box-shadow: 0 0 0 0.25rem rgba(22, 100, 255, 0.25); outline: none;}
.yl-app .btn-add-business:hover {background-color: var(--primary-accent-hover, #0055ff); transform: translateY(-2px);}
.yl-app .business-form-label, .yl-app .godown-form-label, .yl-app .type-form-label {font-weight: 500; color: var(--color-text-1, #0c0d0e);}
.yl-app .btn-add-godown:hover, .yl-app .btn-add-type:hover {background-color: var(--color-primary, #1664ff); transform: translateY(-2px);}
.yl-app .godown-scroll-container, .yl-app .type-scroll-container {flex-grow: 1; overflow-y: auto; max-height: 350px;}
.yl-app .delete-disabled {opacity: 0.5; cursor: not-allowed;}
.yl-app .delete-disabled:hover {opacity: 0.5;}
.yl-app .form-select:focus, .yl-app .form-control:focus {border-color: var(--color-primary, #1664ff); box-shadow: 0 0 0 0.25rem rgba(22, 100, 255, 0.25);}
.yl-app .navigation-container {display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; max-width: 100%; box-sizing: border-box;}
.yl-app .navigation-col-title i {color: var(--color-primary, #1664ff); flex-shrink: 0;}
.yl-app .navigation-col-actions {display: flex; gap: 0.25rem; justify-content: flex-start; flex-shrink: 0; flex-wrap: nowrap;}
.yl-app .banner-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4, 16px);}
.yl-app .banner-item {display: flex; flex-direction: column; border: 1px solid var(--color-border, #dde2e9); border-radius: var(--radius-md, 8px); overflow: hidden; background: var(--color-bg-1, #fff); transition: box-shadow .2s, transform .2s, border-color .2s;}
.yl-app .banner-item:hover {box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.08)); border-color: var(--color-primary, #1664ff);}
.yl-app .banner-preview {position: relative; width: 100%; height: 150px; background: var(--color-bg-5, #f1f3f5); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in;}
.yl-app .banner-preview img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s;}
.yl-app .banner-item:hover .banner-preview img {transform: scale(1.04);}
.yl-app .banner-info {padding: var(--space-3, 12px) var(--space-4, 16px); flex: 1;}
.yl-app .banner-title {font-weight: 600; font-size: var(--font-size-body, 12px); margin-bottom: 4px; color: var(--color-text-1, #0c0d0e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.yl-app .banner-subtitle {font-size: 12px; line-height: 1.4; color: var(--color-text-2, #42464e); margin-bottom: var(--space-2, 8px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.yl-app .banner-meta {display: flex; gap: var(--space-2, 8px); align-items: center;}
.yl-app .banner-sort {display: inline-flex; align-items: center; padding: 1px 8px; font-size: 11px; color: var(--color-text-2, #42464e); background: var(--color-bg-5, #f1f3f5); border-radius: 999px;}
.yl-app .banner-actions {padding: var(--space-2, 8px) var(--space-4, 16px); border-top: 1px solid var(--color-bg-5, #f1f3f5); display: flex; gap: var(--space-4, 16px); justify-content: flex-end;}
.yl-app .banner-empty {grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-12, 48px) var(--space-4, 16px); border: 1px dashed var(--color-border-2, #eaedf1); border-radius: var(--radius-md, 8px); background: var(--color-bg-4, #f7f9fc);}
.yl-app .banner-empty-text {font-size: var(--font-size-body, 12px); color: var(--color-text-2, #42464e);}
.yl-app .banner-empty-sub {font-size: 12px; color: var(--color-text-3, #86909c);}
.yl-app .settings-container {background-color: var(--color-bg-1, #fff); border-radius: 10px; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); padding: 2rem;}
.yl-app .form-section {border-bottom: 1px solid var(--color-border, #dde2e9); display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: 1.5rem; padding-bottom: 1.5rem;}
.yl-app .form-section-title {font-size: 1.1rem; font-weight: 600; color: var(--color-text-1, #0c0d0e); margin-bottom: 1.2rem; display: flex; align-items: center;}
.yl-app .form-section-title i {margin-right: 10px; font-size: 1.3rem; color: var(--color-primary, #1664ff);}
.yl-app .info-item {display: flex; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--color-border, #dde2e9);}
.yl-app .icon-circle {width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;}
.yl-app .file-upload {width: 100%; height: 150px; border: 2px dashed var(--color-border, #dde2e9); border-radius: 10px; padding: 30px 20px; text-align: center; transition: all 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative;}
.yl-app .file-upload:hover {border-color: var(--color-primary); background-color: var(--color-bg-5, #f1f3f5);}
.yl-app .btn-outline-primary:hover {background-color: var(--color-primary); color: var(--color-bg-1, #fff);}
.yl-app .btn-outline-danger:hover {background-color: var(--color-danger, #d7312a); color: var(--color-bg-1, #fff);}
.yl-app .spin {animation: spin 1s linear infinite; display: inline-block;}
.yl-app @keyframes spin {}
to {transform: rotate(360deg);}
.yl-app .drag-drop-zone {border: 2px dashed var(--color-border, #dde2e9); border-radius: 10px; padding: 40px 20px; text-align: center; background: var(--color-bg-5, #f1f3f5); transition: all 0.3s; cursor: pointer;}
.yl-app .drag-drop-zone:hover, .yl-app .drag-drop-zone.dragover {border-color: var(--bs-primary); background: var(--color-primary-bg, #e7f1ff);}
.yl-app .file-info {background: var(--color-success-bg, #d1fae5); border: 1px solid var(--color-success-bg, #d1fae5); border-radius: 8px; padding: 15px; margin: 15px 0;}
.yl-app .key-display {font-family: 'Courier New', monospace; font-size: 0.9em; word-break: break-all;}
.yl-app .upload-status {display: none; margin-top: 15px;}
.yl-app .feature-list li {margin-bottom: 0.5rem; display: flex; align-items: center;}
.yl-app .feature-list i, .yl-app .filter-bar--task .filter-row--main > .filter-field:has(.filter-dropdown) {margin-right: 8px;}
.yl-app .action-text {max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.yl-app .avatar-sm {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.icon-picker-item[style*="opacity: 0.3"] {background-color: var(--color-danger-bg, #fee2e2) !important; border-color: var(--color-danger-bg, #fee2e2) !important; cursor: not-allowed !important;}
.yl-app .form-section-title i {margin-right: 10px; font-size: 1.3rem; color: var(--color-primary);}
.yl-app .logo-preview {max-width: 200px; max-height: 100px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.yl-app .current-logo {text-align: center; padding: 20px; background: var(--color-bg-5, #f1f3f5); border-radius: 8px; margin-bottom: 15px;}
.yl-app #clientAttachmentsModal .attachments-grid, .yl-app #attachmentsList .attachments-grid, .yl-app #attachmentsModal .attachments-grid {display: flex; flex-wrap: wrap; gap: 15px; margin: 10px 0;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-item, .yl-app #attachmentsList .attachments-grid .attachment-item, .yl-app #attachmentsModal .attachments-grid .attachment-item {flex: 0 0 calc(20% - 12px); max-width: calc(20% - 12px); box-sizing: border-box;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-info {background-color: var(--color-bg-4); border-radius: 6px; padding: 12px; height: 100%; display: flex; flex-direction: column;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-category, .yl-app #attachmentsList .attachments-grid .attachment-category, .yl-app #attachmentsModal .attachments-grid .attachment-category {margin-bottom: 10px;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-image-container, .yl-app #attachmentsList .attachments-grid .attachment-image-container, .yl-app #attachmentsModal .attachments-grid .attachment-image-container {width: 100%; height: 100%; overflow: hidden; display: block; position: relative;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-image-container img, .yl-app #attachmentsList .attachments-grid .attachment-image-container img, .yl-app #attachmentsModal .attachments-grid .attachment-image-container img {width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;}
.yl-app #clientAttachmentsModal .attachments-grid .view-btn, .yl-app #attachmentsList .attachments-grid .view-btn, .yl-app #attachmentsModal .attachments-grid .view-btn {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 13, 14, 0.35); color: var(--color-white); border: none; opacity: 0; transition: opacity 150ms ease; z-index: 2;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-item:hover .view-btn, .yl-app #attachmentsList .attachments-grid .attachment-item:hover .view-btn, .yl-app #attachmentsModal .attachments-grid .attachment-item:hover .view-btn {opacity: 1;}
.yl-app #clientAttachmentsModal .attachments-grid .file-info, .yl-app #attachmentsList .attachments-grid .file-info, .yl-app #attachmentsModal .attachments-grid .file-info {text-align: center; padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--color-bg-4); border: none; border-radius: 4px;}
.yl-app #clientAttachmentsModal .attachments-grid .file-info i, .yl-app #attachmentsList .attachments-grid .file-info i, .yl-app #attachmentsModal .attachments-grid .file-info i {font-size: 48px; color: var(--color-text-3); margin-bottom: 10px;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-details, .yl-app #attachmentsList .attachments-grid .attachment-details, .yl-app #attachmentsModal .attachments-grid .attachment-details {font-size: 14px;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-details div, .yl-app #attachmentsList .attachments-grid .attachment-details div, .yl-app #attachmentsModal .attachments-grid .attachment-details div {margin-bottom: 4px;}
.yl-app #clientAttachmentsModal .attachments-grid .attachment-actions, .yl-app #attachmentsList .attachments-grid .attachment-actions, .yl-app #attachmentsModal .attachments-grid .attachment-actions {margin-top: auto; text-align: center; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;}
.yl-app #clientAttachmentsModal .attachments-grid .file-size, .yl-app #attachmentsList .attachments-grid .file-size, .yl-app #attachmentsModal .attachments-grid .file-size {color: var(--color-text-3); font-size: 0.85rem;}
.yl-app #attachmentsList .attachments-grid .attachment-info, .yl-app #attachmentsModal .attachments-grid .attachment-info {background-color: var(--color-bg-4); border-radius: 6px; padding: 12px; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--color-border);}
@media (max-width: 1200px) {
.yl-app #attachmentsList .attachments-grid .attachment-item, .yl-app #attachmentsModal .attachments-grid .attachment-item {flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px);}
}
@media (max-width: 992px) {
.yl-app #attachmentsList .attachments-grid .attachment-item, .yl-app #attachmentsModal .attachments-grid .attachment-item {flex: 0 0 calc(33.333% - 10px); max-width: calc(33.333% - 10px);}
}
@media (max-width: 768px) {
.yl-app #attachmentsList .attachments-grid .attachment-item, .yl-app #attachmentsModal .attachments-grid .attachment-item {flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px);}
}
@media (max-width: 480px) {
.yl-app #attachmentsList .attachments-grid .attachment-item, .yl-app #attachmentsModal .attachments-grid .attachment-item {flex: 0 0 100%; max-width: 100%;}
}
.yl-app .form-field.is-disabled {opacity: 0.5; transition: opacity 200ms ease;}
.yl-app .kit-items-list {display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); min-height: 56px; background-color: var(--color-bg-4); border-radius: var(--radius-sm); border: 1px dashed var(--color-border-3);}
.yl-app .kit-items-empty {color: var(--color-text-3); font-size: var(--font-size-body); text-align: center; padding: var(--space-3) var(--space-2);}
.yl-app .kit-item-row {display: grid; grid-template-columns: 1fr 120px 32px; gap: var(--space-2); align-items: center;}
.yl-app .kit-item-remove {width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); color: var(--color-text-3); cursor: pointer; transition: all 150ms ease;}
.yl-app .kit-item-remove:hover {background-color: var(--danger-1); color: var(--danger-6); border-color: var(--danger-6);}
.yl-app .kit-items-add {margin-top: var(--space-2); padding: 6px 12px; background: transparent; border: 1px dashed var(--primary-6); color: var(--primary-6); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-body); transition: all 150ms ease; align-self: flex-start; width: fit-content; max-width: 100%; display: inline-flex; align-items: center;}
.yl-app .kit-items-add:hover {background-color: var(--primary-1); border-style: solid;}
.yl-app .form-row--compact {gap: var(--space-3); margin-bottom: 12px;}
.yl-app .form-row--compact > .form-field {flex: 1 1 0; min-width: 0; align-items: flex-start;}
.yl-app .form-row--compact > .form-field > .form-input, .yl-app .form-row--compact > .form-field > .switch {align-self: flex-start;}
.yl-app .searchable-select {position: relative; width: 100%;}
.yl-app .searchable-select .ss-trigger {width: 100%; padding: 6px 56px 6px 28px; cursor: text; background-color: var(--color-bg-4); border: 1px solid var(--color-border-2); border-radius: var(--radius-sm); color: var(--color-text-1); font-size: var(--font-size-body); transition: border-color 150ms ease, box-shadow 150ms ease; min-height: 32px; appearance: none; -webkit-appearance: none; outline: none;}
.yl-app .searchable-select .ss-trigger:hover, .yl-app .searchable-select .ss-trigger.is-open, .yl-app .searchable-select .ss-trigger:focus {border-color: var(--primary-5); box-shadow: 0 0 0 3px rgba(59,130,246,.1);}
.yl-app .searchable-select .ss-trigger[readonly]::-webkit-search-cancel-button, .yl-app .searchable-select .ss-trigger::-webkit-search-decoration {-webkit-appearance: none;}
.yl-app .searchable-select::before {content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23868e96' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; opacity: 0.7;}
.yl-app .searchable-select .ss-clear, .yl-app .searchable-select .ss-toggle {position: absolute; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-3); transition: all 150ms ease; padding: 0; line-height: 1;}
.yl-app .searchable-select .ss-clear {right: 28px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg-5); font-size: 12px; display: none;}
.yl-app .searchable-select.has-value .ss-clear {display: inline-flex;}
.yl-app .searchable-select .ss-clear:hover {background: var(--danger-1); color: var(--danger-6);}
.yl-app .searchable-select .ss-toggle {right: 6px; width: 20px; height: 20px; font-size: 13px;}
.yl-app .searchable-select .ss-toggle i {transition: transform 200ms ease;}
.yl-app .ss-dropdown {position: fixed; left: -9999px; top: -9999px; z-index: 1080; background: var(--color-bg-4); border: 1px solid var(--color-border-2); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,.15), var(--shadow-md); overflow-y: auto; display: none; padding: 4px 0; min-width: 180px;}
.yl-app .ss-dropdown.is-open {animation: ss-dropdown-in 120ms ease-out; display: block;}
@keyframes ss-dropdown-in {
from {opacity: 0; transform: translateY(-4px);}
to {opacity: 1; transform: translateY(0);}
}
.yl-app .ss-dropdown .ss-item {padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--color-text-1); border-left: 2px solid transparent; transition: background-color 100ms ease;}
.yl-app .ss-dropdown .ss-item:hover, .yl-app .ss-dropdown .ss-item.is-active {background-color: var(--primary-1); border-left-color: var(--primary-5);}
.yl-app .ss-dropdown .ss-item.is-selected {background-color: var(--primary-1); color: var(--primary-6); font-weight: 600;}
.yl-app .ss-dropdown .ss-item.is-disabled {opacity: 0.5; cursor: not-allowed; color: var(--color-text-3);}
.yl-app .ss-dropdown .ss-item-sub {color: var(--color-text-3); font-size: 12px; margin-top: 2px;}
.yl-app .ss-dropdown .ss-item mark {background: rgba(250, 204, 21, 0.4); color: inherit; padding: 0; border-radius: 2px;}
.yl-app .ss-dropdown .ss-state {padding: 16px; text-align: center; color: var(--color-text-3); font-size: 13px;}
@keyframes ss-spin {
to {transform: rotate(360deg);}
}
.yl-app tr.row-locked input.is-locked, .yl-app tr.row-locked select.is-locked {background-color: var(--color-fill-2, #f5f6f8); color: var(--color-text-3, #6b7280); cursor: not-allowed; border-color: var(--color-border-2, #e5e7eb);}
.yl-app tr.row-locked .image-upload-area {filter: grayscale(1);}
.yl-app .jump-btn {height: 28px; margin-left: 2px; padding: 0 12px; border: none; border-radius: var(--radius-sm); background: var(--primary-6); color: var(--color-white); font-size: var(--font-size-lead); line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease;}
.yl-app .jump-btn:hover {background: var(--primary-7, var(--primary-6));}
.yl-app .jump-btn:active {background: var(--primary-8, var(--primary-7, var(--primary-6)));}
#sidebar, .admin-sidebar {background: var(--sidebar-bg); color: var(--sidebar-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.5; position: fixed; top: var(--header-height); left: 0; width: var(--sidebar-width); height: calc(100vh - var(--header-height)); transition: width var(--transition-speed) ease, transform var(--transition-speed) ease; z-index: 1020; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;}
#sidebar.collapsed {width: var(--sidebar-collapsed-width);}
#main-content {flex: 1; margin-left: var(--sidebar-width); margin-top: var(--header-height); padding: 10px 20px 20px 20px; min-height: calc(100vh - var(--header-height)); transition: margin-left var(--transition-speed) ease !important; position: relative; width: calc(100% - var(--sidebar-width)); background-color: var(--content-bg); box-sizing: border-box;}
#main-content.yl-app {background-color: #ffffff;}
#main-content.expanded, #sidebar.collapsed ~ #main-content {margin-left: var(--sidebar-collapsed-width) !important; width: calc(100% - var(--sidebar-collapsed-width));}
#sidebar ~ #main-content {transition: margin-left var(--transition-speed) ease !important;}
@media (max-width: 992px) {
#sidebar ~ #main-content, #sidebar.collapsed ~ #main-content, #main-content.expanded {margin-left: 0 !important; width: 100% !important;}
#main-content {margin-left: 0 !important; width: 100% !important; padding: 10px 15px 15px 15px; margin-top: var(--header-height) !important; min-height: calc(100vh - var(--header-height));}
}
.sidebar-header {padding: 20px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;}
.sidebar-header h3 {font-size: 1.25rem; font-weight: 500; margin: 0; color: var(--sidebar-text); transition: opacity var(--transition-speed);}
.sidebar-toggle {background: var(--sidebar-hover); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease;}
.sidebar-toggle:hover, .mobile-toggle:hover {background: var(--sidebar-hover);}
.sidebar-toggle i {color: var(--sidebar-text); transition: transform var(--transition-speed);}
#menuContainer, .components {padding: 16px 0; flex: 1; overflow-y: auto; overflow-x: hidden;}
.admin-sidebar .nav-item {position: relative; margin: 4px 12px; border-radius: 6px; overflow: hidden;}
min-height: 44px; height: auto; line-height: 1.5; .admin-sidebar .nav-link {color: var(--sidebar-text); display: flex; align-items: center; padding: 12px 16px; text-decoration: none; transition: all 0.2s ease; position: relative; border-radius: 6px; box-sizing: border-box;}
.admin-sidebar .nav-link:hover {background: var(--sidebar-nav-hover); color: var(--sidebar-active);}
.admin-sidebar .nav-link.active {background: transparent; color: var(--sidebar-active); font-weight: 500;}
.admin-sidebar .nav-link i {font-size: 1.2rem; width: 24px; text-align: center; margin-right: 12px; color: var(--sidebar-icon); transition: margin var(--transition-speed);}
.admin-sidebar .components > .nav-item > .nav-link > i:first-child:not(.collapse-control) {line-height: 1; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.admin-sidebar .nav-link > i:first-child {flex-shrink: 0; color: inherit !important;}
.admin-sidebar .nav-link:hover i, .admin-sidebar .nav-link.active i, .admin-sidebar .nav-link:hover .menu-text, .admin-sidebar .nav-link.active .menu-text, .submenu .nav-link.active i {color: var(--sidebar-active);}
.menu-text {flex-grow: 1; transition: opacity var(--transition-speed);}
.collapse-control {font-size: 0.8rem !important; display: inline-block !important; transition: transform 0.3s ease;}
.submenu {background: transparent; border-radius: 0 0 6px 6px; margin-top: 0; padding: 4px 0 8px 8px; min-height: 60px;}
.submenu.collapse.show {height: auto;}
.submenu .list-unstyled {max-height: none; overflow-y: visible; width: 100%;}
.submenu .nav-link {padding: 10px 12px 10px 28px; font-size: 13px; height: auto; min-height: 40px; border-radius: 8px; color: var(--sidebar-text);}
.admin-sidebar .submenu .nav-link {padding-left: 28px;}
.submenu .nav-link:hover {background: var(--sidebar-hover); color: var(--sidebar-active);}
.submenu .nav-link i {font-size: 13px; margin-right: 10px; color: var(--sidebar-icon);}
.admin-sidebar .submenu .nav-link > i:first-child {display: inline-block !important; font-size: 0.95em; margin-right: 10px; color: inherit;}
.submenu .nav-link.active {background: var(--sidebar-submenu-active-bg); color: var(--sidebar-active); font-weight: 500;}
.submenu .nav-item {margin: 2px 8px 2px 0; width: calc(100% - 8px);}
.has-submenu > .nav-link + .submenu {position: relative; z-index: 1; border-top: none;}
.sidebar-footer {padding: 16px; border-top: 1px solid var(--sidebar-border); display: flex; justify-content: center; flex-shrink: 0;}
.sidebar-collapse-btn {display: flex; align-items: center; cursor: pointer; color: var(--sidebar-icon); transition: all 0.2s ease; padding: 8px 16px; border-radius: 4px; border: 1px solid var(--sidebar-border); background: transparent;}
.sidebar-collapse-btn:hover {color: var(--sidebar-text); background: var(--sidebar-hover);}
.sidebar-collapse-btn i {margin-right: 8px; font-size: 0.9rem;}
.admin-sidebar .nav-link.active > i:first-child, .admin-sidebar .nav-link.active:hover > i:first-child, .admin-sidebar .submenu .nav-link.active > i:first-child {color: var(--sidebar-active) !important;}
.admin-sidebar .nav-link:focus-visible, .sidebar-collapse-btn:focus-visible, .sidebar-toggle:focus-visible, .mobile-toggle:focus-visible {outline: 2px solid rgba(22, 100, 255, 0.6); outline-offset: 2px;}
.mobile-toggle {display: none; position: fixed; top: 12px; left: 12px; z-index: 99; background: var(--sidebar-bg); color: var(--sidebar-text); border: 1px solid var(--sidebar-border); border-radius: 4px; padding: 8px 12px; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease;}
#sidebar-overlay {position: fixed; top: var(--header-height, 58px); left: 0; width: 100%; height: calc(100vh - var(--header-height, 58px)); background: rgba(12, 13, 14, 0.45); z-index: 1038; display: none; backdrop-filter: blur(2px); transition: opacity 0.3s;}
@media (max-width: 992px) {
#sidebar, .admin-sidebar {transform: translateX(-100%); width: 280px; max-width: 280px; overflow: hidden; top: var(--header-height, 58px); left: 0; height: calc(100vh - var(--header-height, 58px)); position: fixed; z-index: 1040; transition: transform 0.3s ease; box-shadow: none; background: var(--sidebar-bg);}
.sidebar-header {display: flex; padding: 16px;}
#menuContainer, .components {padding: 12px 0;}
.nav-item {margin: 4px 12px;}
.nav-link {padding: 12px 12px; font-size: 0.95rem;}
.nav-link i {font-size: 1.1rem; margin-right: 12px;}
.submenu {padding: 4px 0 8px 8px;}
.submenu .nav-link {padding: 10px 12px 10px 28px; font-size: 13px; min-height: 40px; border-radius: 8px;}
.sidebar-footer {padding: 12px;}
.sidebar-collapse-btn {padding: 8px 12px;}
#sidebar, .admin-sidebar {width: 260px; max-width: 260px;}
#sidebar.show, .admin-sidebar.show {box-shadow: 0 8px 24px rgba(12, 13, 14, 0.12); max-width: 260px; overflow-y: auto; transform: translatex(0); width: 260px;}
.mobile-toggle {display: block; font-size: 1rem; left: 8px; padding: 6px 12px; top: 8px;}
.sidebar-header h3 {font-size: 1.15rem;}
.nav-link {padding: 12px 12px; font-size: 0.92rem;}
.nav-link i {font-size: 1.05rem; margin-right: 8px;}
.submenu .nav-link {padding: 8px 12px 8px 28px; font-size: 0.88rem; border-radius: 8px;}
.submenu .nav-link i {font-size: 0.85rem; margin-right: 8px;}
.collapse-control {font-size: 0.75rem !important;}
}
@media (max-width: 576px) {
#sidebar, .admin-sidebar, #sidebar.show, .admin-sidebar.show {width: 240px; max-width: 240px;}
.mobile-toggle {top: 8px; left: 8px; padding: 5px 8px; font-size: 0.95rem;}
.sidebar-header {padding: 12px 16px;}
.sidebar-header h3 {font-size: 1rem;}
#menuContainer, .components {padding: 8px 0;}
.nav-item {margin: 4px 8px;}
.nav-link {padding: 12px 12px; font-size: 0.9rem;}
.nav-link i {font-size: 1rem; width: 22px; margin-right: 8px;}
.menu-text {font-size: 0.9rem;}
.submenu {padding: 4px 0 8px 8px;}
.submenu .nav-link {padding: 8px 12px 8px 28px; font-size: 0.86rem; min-height: 40px; border-radius: 8px;}
.submenu .nav-link i {font-size: 0.8rem; margin-right: 8px;}
.submenu .nav-item {margin: 6px 0; width: calc(100% - 6px);}
.sidebar-footer {padding: 12px 12px;}
.sidebar-collapse-btn {padding: 8px 12px; font-size: 0.88rem;}
.sidebar-collapse-btn i {font-size: 0.85rem; margin-right: 8px;}
.collapse-control {font-size: 0.7rem !important;}
}
@media (max-width: 400px) {
#sidebar, .admin-sidebar, #sidebar.show, .admin-sidebar.show {width: 220px; max-width: 220px;}
.sidebar-header {padding: 12px 12px;}
.sidebar-header h3 {font-size: 0.95rem;}
.nav-link {padding: 8px 12px; font-size: 0.86rem;}
.nav-link i {font-size: 0.95rem; margin-right: 8px;}
.submenu .nav-link {padding: 8px 12px 8px 24px; font-size: 0.82rem; min-height: 42px;}
}
#header {position: fixed; top: 0; left: 0 !important; right: 0; z-index: 1045; background: var(--hdr-bg); margin: 0; padding: 0; width: 100% !important; box-shadow: var(--hdr-shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; border-bottom: 1px solid var(--hdr-border);}
.header-wrapper {display: flex; align-items: center; width: 100%; height: 100%; min-width: 0;}
.header-left {display: flex; align-items: center; height: 100%; width: 240px; padding: 0 12px; flex-shrink: 0; gap: 4px; border-right: 1px solid var(--hdr-border);}
.header-icon-btn {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--hdr-text-secondary); border-radius: var(--hdr-radius-btn); cursor: pointer; transition: var(--hdr-transition); font-size: 1.15rem; flex-shrink: 0;}
.header-icon-btn:hover, .header-tab:hover, .notification-btn:hover, .notification-bell-wrapper:hover {background: var(--hdr-surface-hover); color: var(--hdr-accent);}
.header-brand {text-decoration: none; color: var(--hdr-text); white-space: nowrap; display: flex; align-items: center; gap: 8px; margin-left: 4px;}
.header-brand .brand-text {font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em;}
.header-brand-mark {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--hdr-radius-card); background: linear-gradient(135deg, #1664ff, #387bff); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(22, 100, 255, 0.28);}
.header-tabs-wrapper {display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; overflow: hidden;}
.header-home-btn {display: flex; align-items: center; justify-content: center; width: 38px; height: 100%; color: var(--hdr-text-secondary); text-decoration: none; transition: var(--hdr-transition); flex-shrink: 0; font-size: 1rem; border-right: 1px solid var(--hdr-border);}
.header-home-btn:hover {color: var(--hdr-accent); background: var(--hdr-surface-hover);}
.header-tabs {display: flex; align-items: stretch; height: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex: 1; min-width: 0; scrollbar-width: none; -ms-overflow-style: none;}
.header-tab {display: inline-flex; align-items: center; height: var(--hdr-height); min-height: var(--hdr-height); padding: 0; background: transparent; color: var(--hdr-text-secondary); cursor: pointer; transition: var(--hdr-transition); position: relative; overflow: hidden; flex-shrink: 0; min-width: 0; max-width: 180px; border-right: 1px solid var(--hdr-border);}
.header-tab::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; transition: background 150ms ease;}
.header-tab.active {background: transparent; color: var(--hdr-accent); font-weight: 600;}
.header-tab.active::after {background: var(--hdr-accent);}
.header-tab-link {display: inline-flex; align-items: center; padding: 0 12px; height: var(--hdr-height); text-decoration: none; color: inherit; min-width: 0; flex: 1;}
.tab-label {font-size: var(--hdr-font); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; flex: 1; min-width: 0;}
.header-tab-close {display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; border: none; background: transparent; color: var(--hdr-text-disabled); cursor: pointer; transition: var(--hdr-transition); flex-shrink: 0; padding: 0; border-radius: 50%;}
.header-tab-close:hover, .dd-item-close:hover {background: var(--hdr-surface-hover); color: var(--hdr-text-2);}
.header-tab-close i, .dd-item-close i, .yl-app .filter-dropdown .fd-option .fd-name {font-size: 13px;}
.header-dropdown {display: inline-flex; align-items: center; height: var(--hdr-height); min-height: var(--hdr-height); flex-shrink: 0; position: relative; z-index: 1050; border-left: 1px solid var(--hdr-border);}
.header-dropdown-toggle {display: inline-flex; align-items: center; justify-content: center; height: var(--hdr-height); min-height: var(--hdr-height); padding: 0 12px; border: none !important; background: transparent !important; background-color: transparent !important; color: var(--hdr-text-secondary); cursor: pointer; transition: var(--hdr-transition); gap: 7px; font-size: 1rem; font-weight: 500; white-space: nowrap; user-select: none; box-shadow: none !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent;}
.header-dropdown-toggle .dd-count {display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; font-size: 0.7rem; font-weight: 700; line-height: 1; color: #fff; background: var(--hdr-accent); border-radius: var(--hdr-radius-pill);}
.header-dropdown-toggle i {font-size: 1.1rem; transition: transform 0.2s ease;}
.header-dropdown-toggle:hover {background: var(--hdr-surface-hover) !important; color: var(--hdr-accent) !important;}
.header-dropdown-toggle.show {background: var(--hdr-surface-active) !important; color: var(--hdr-accent) !important;}
.header-dropdown-menu {position: fixed; top: 0; left: 0; min-width: 220px; max-height: 520px; overflow-y: auto; overflow-x: hidden; background: #ffffff; border: 1px solid var(--hdr-border); border-radius: var(--hdr-radius-card); box-shadow: var(--hdr-shadow-menu); z-index: 9999; display: none; padding: 8px; pointer-events: auto;}
.header-dropdown-menu.show {display: block; animation: ddSlideIn 0.16s cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes ddSlideIn {
from {opacity: 0; transform: translateY(-6px) scale(0.97);}
to {opacity: 1; transform: translateY(0) scale(1);}
}
.dd-label {padding: 6px 10px 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hdr-text-secondary); user-select: none;}
.dd-item {display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: var(--hdr-text-2); text-decoration: none; border-radius: 6px; transition: var(--hdr-transition); cursor: pointer; gap: 8px; margin-bottom: 2px;}
.dd-item:hover, .dropdown-action:hover {background: var(--hdr-surface-hover); color: var(--hdr-text); text-decoration: none;}
.dd-item.active {background: var(--hdr-accent-bg); color: var(--hdr-accent); font-weight: 600;}
.dd-item-label {flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; line-height: 1.3;}
.dd-item-close {display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--hdr-text-disabled); cursor: pointer; transition: var(--hdr-transition); flex-shrink: 0;}
.header-right {display: flex; align-items: center; height: 100%; padding: 0 12px; gap: 6px; flex-shrink: 0; border-left: 1px solid var(--hdr-border); background: var(--hdr-bg);}
.notification-btn, .notification-bell-wrapper {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--hdr-text-secondary); border-radius: var(--hdr-radius-btn); cursor: pointer; transition: var(--hdr-transition); position: relative; font-size: 1.05rem; flex-shrink: 0; padding: 0;}
#notificationDropdown {display: flex; flex-direction: row; align-items: center; height: var(--hdr-height); flex-shrink: 0; border: 0; background: transparent; padding: 0; box-shadow: none; border-radius: 0;}
.notification-bell-icon {font-size: 1.05rem !important; color: var(--hdr-text-secondary) !important;}
.notification-bell-wrapper:hover .notification-bell-icon {color: var(--hdr-accent) !important;}
.notification-dropdown {width: 380px; max-height: 480px; overflow: hidden; background: #fff !important; border: 1px solid var(--hdr-border) !important; box-shadow: var(--hdr-shadow-menu) !important; border-radius: var(--hdr-radius-card) !important;}
.notification-dropdown .dropdown-header {background-color: var(--hdr-surface); padding: 12px 16px; border-bottom: 1px solid var(--hdr-border);}
.notification-list {max-height: 380px; overflow-y: auto;}
.notification-item {padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background-color 0.2s;}
.notification-item:hover {background-color: var(--hdr-surface);}
.notification-item.unread {background-color: var(--hdr-accent-bg);}
.notification-item.unread:hover {background-color: rgba(22, 100, 255, 0.12);}
.notification-title {font-weight: 500; margin-bottom: 4px; color: var(--hdr-text);}
.notification-content {font-size: 13px; color: var(--hdr-text-secondary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notification-time {font-size: 12px; color: var(--hdr-text-muted);}
.notification-empty {padding: 40px 16px; text-align: center; color: var(--hdr-text-secondary);}
.notification-footer {padding: 8px 16px; text-align: center; border-top: 1px solid var(--hdr-border); background-color: var(--hdr-surface);}
.notification-footer a {color: var(--hdr-accent); text-decoration: none; font-size: 13px;}
.header-user-name {font-size: var(--hdr-font); font-weight: 500; color: var(--hdr-text-2); white-space: nowrap; padding: 0 8px;}
.header-avatar-btn {display: flex; align-items: center; padding: 2px; border: none; background: transparent; border-radius: 50%; cursor: pointer; transition: var(--hdr-transition);}
.header-avatar-btn:hover {background: var(--hdr-surface-hover);}
.avatar-ring {width: 32px; height: 32px; position: relative; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--hdr-border-strong); transition: var(--hdr-transition);}
.avatar-ring:hover {border-color: var(--hdr-accent);}
.avatar-placeholder {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1664ff, #387bff); border-radius: 50%;}
.avatar-text {font-size: 0.72rem; font-weight: 700; line-height: 1; color: #fff;}
.avatar-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.header-user-dropdown {min-width: 260px !important; margin-top: 6px !important; border-radius: var(--hdr-radius-card) !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--hdr-border) !important; box-shadow: var(--hdr-shadow-menu) !important; overflow: hidden;}
.dropdown-profile {display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--hdr-surface); border-bottom: 1px solid var(--hdr-border);}
.dropdown-profile-avatar {width: 38px; height: 38px; position: relative; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--hdr-border-strong); flex-shrink: 0;}
.profile-name {font-size: 0.8125rem; font-weight: 600; color: var(--hdr-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.profile-email {font-size: 0.75rem; color: var(--hdr-text-secondary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dropdown-messages {padding: 8px 12px;}
.msg-success {display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 0.78rem; color: var(--hdr-success); background: var(--hdr-success-bg); border-radius: 4px;}
.msg-error {display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 0.78rem; color: var(--hdr-danger); background: var(--hdr-danger-bg); border-radius: 4px;}
.dropdown-actions {padding: 4px 0;}
.dropdown-action {display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.8125rem; color: var(--hdr-text-2); text-decoration: none; transition: var(--hdr-transition); cursor: pointer;}
.dropdown-action i {font-size: 1rem; color: var(--hdr-text-secondary); width: 18px; text-align: center;}
.dropdown-action:hover i {color: var(--hdr-accent);}
.action-logout, .action-logout i {color: var(--hdr-danger) !important;}
.action-logout:hover {background: var(--hdr-danger-bg) !important; color: var(--hdr-danger-hover) !important;}
.action-logout:hover i {color: var(--hdr-danger-hover) !important;}
.header-icon-btn:focus-visible, .header-home-btn:focus-visible, .notification-btn:focus-visible, .notification-bell-wrapper:focus-visible, .header-avatar-btn:focus-visible, .header-dropdown-toggle:focus-visible, .header-tab-close:focus-visible, .dd-item-close:focus-visible, .header-tab-link:focus-visible, .dropdown-action:focus-visible {outline: none; box-shadow: var(--hdr-focus-ring);}
@media (max-width: 768px) {
.header-brand, .header-user-name {display: none;}
.header-left {padding: 0 12px;}
.header-tab {max-width: 140px;}
.tab-label {font-size: 0.78rem;}
}
.header-dropdown-menu::-webkit-scrollbar {width: 4px;}
.header-dropdown-menu::-webkit-scrollbar-thumb {background: var(--hdr-border-strong); border-radius: 2px;}
.header-dropdown-menu::-webkit-scrollbar-thumb:hover {background: var(--hdr-text-disabled);}
.yl-app .table-pagination {display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); font-size: var(--font-size-lead); color: var(--color-text-3);}
.yl-app .badge-active {background: var(--status-yuanliDanger-5); border-color: var(--danger-5);}
.yl-app .badge-ash {background: var(--grey-4); border-color: var(--grey-6);}
.yl-app .badge-dot.badge-small {width: 6px; height: 6px;}
.yl-app .badge-dot {height: 8px; padding: 0; width: 8px;}
.yl-app .badge-number {height: 14px; padding: 2px 5px; width: 14px;}
.yl-app .badge-number-plus {padding: 2px 4px; min-width: 14px; height: 14px;}
.yl-app .badge-number-plus.badge-small {min-width: 12px; height: 12px;}
.yl-app .badge-number-plus.badge-large {min-width: 16px; height: 16px;}
.yl-app .badge-icon {border: none; box-shadow: none; height: 20px; overflow: hidden; padding: 0; width: 20px;}
.yl-app .badge-icon svg {width: 100%; height: 100%;}
.yl-app .badge-icon-success {color: var(--success-5);}
.yl-app .badge-icon-warning {color: var(--warning-3);}
.yl-app .badge-icon-error {color: var(--status-yuanliDanger-5);}
.yl-app .badge-wrapper {position: relative; display: inline-flex; align-items: flex-start;}
.yl-app .badge-avatar {border-radius: 50%; background: var(--color-bg-5); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.yl-app .badge-avatar-large .badge-avatar {width: 40px; height: 40px;}
.yl-app .badge-avatar svg {width: 60%; height: 60%; color: var(--color-text-muted);}
.yl-app .form-card {background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin-bottom: var(--space-6);}
.yl-app .photo-count-badge {position: absolute; top: 4px; right: 4px; background: rgba(12, 13, 14, 0.6); color: var(--color-white); font-size: var(--font-size-xs); line-height: 1.4; padding: 0 6px; border-radius: var(--radius-full);}
.yl-app .vc-badge.is-success, .yl-app .status-tag-fill.status-tag-success, .yl-app .page-header-tag-success {background: var(--success-2); color: var(--success-6);}
.yl-app .vc-badge.is-warning, .yl-app .status-tag-fill.status-tag-warning {background: var(--warning-2); color: var(--warning-6);}
.yl-app .vc-badge.is-neutral {background: var(--color-bg-4); color: var(--color-text-2);}
.yl-app .pagination-wrapper {display: flex; align-items: center; gap: var(--space-2);}
.yl-app .pagination-default .page-item {width: 28px; height: 28px; font-size: var(--font-size-lead); line-height: var(--line-height-h1);}
.yl-app .pagination-small .page-item {width: 24px; height: 24px; font-size: var(--font-size-body); line-height: var(--line-height-h3);}
.yl-app .page-item {display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text-1); font-weight: var(--font-weight-regular); letter-spacing: 0.03em; cursor: pointer; box-sizing: border-box; transition: border-color 150ms ease, background 150ms ease, color 150ms ease;}
.yl-app .page-item.active {background: var(--primary-6); border-color: var(--primary-6); color: var(--color-white); font-weight: var(--font-weight-medium);}
.yl-app .page-item.disabled {color: var(--text-yuanliNeutral-5); border-color: var(--color-border-2); cursor: not-allowed; pointer-events: none;}
.yl-app .page-item-more {border-color: var(--color-border-3); letter-spacing: 2px; font-weight: var(--font-weight-medium);}
.yl-app .pagination-total {font-size: var(--font-size-lead); color: var(--color-text-3); white-space: nowrap;}
.yl-app .pagination-jump {font-size: var(--font-size-lead); color: var(--color-text-3); white-space: nowrap; display: flex; align-items: center; gap: var(--space-1);}
.yl-app .pagination-small .page-simple-indicator {height: 24px; font-size: var(--font-size-body); padding: 0 8px;}
.yl-app .status-tag-success {background: var(--success-1); color: var(--color-success); border-color: var(--success-3);}
.yl-app .status-tag-warning {background: var(--warning-1); color: var(--color-warning); border-color: var(--warning-3);}
.yl-app .status-tag-error {background: var(--danger-2); color: var(--danger-5); border-color: var(--danger-3);}
.yl-app .status-tag-stop {background: var(--color-bg-5); color: var(--grey-4); border-color: var(--color-border-3);}
.yl-app .status-tag-processing, .yl-app .status-tag-loading {background: var(--primary-2); color: var(--primary-6); border-color: var(--primary-3);}
.yl-app .status-tag-waiting {background: var(--violet-1); color: var(--violet-6); border-color: var(--violet-3);}
.yl-app .status-tag-icon {align-items: center; display: inline-flex; flex-shrink: 0; height: 14px; justify-content: center; width: 14px;}
.yl-app .status-tag-text, .yl-app .content-card.list-card > .content-card-body, .status-tag-text {padding: 0; background: transparent;}
.yl-app .status-tag-text.status-tag-warning {color: var(--warning-6);}
.yl-app .pagination-controls {display: flex; align-items: center; gap: 2px;}
.yl-app .pagination-active {color: var(--primary-6) !important; font-weight: var(--font-weight-medium);}
.yl-app .pagination-ellipsis {padding: 0 8px; color: var(--color-text-3);}
.yl-app .tabs-line .tab-item .tab-badge {display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger-5); color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-medium); border-radius: var(--radius-md); line-height: 1;}
.yl-app .tabs-card {display: flex; align-items: flex-end; padding: 0; border-bottom: 1px solid var(--color-border-2); background: var(--color-white); gap: 6px;}
.yl-app .tabs-card::before {content: ''; width: 32px; flex-shrink: 0; align-self: stretch;}
.yl-app .tabs-card .tab-item {position: relative; color: var(--color-text-2); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); cursor: pointer; border: 1px solid var(--color-border-2); border-radius: 4px 4px 0 0; background: var(--color-bg-4); margin-bottom: -1px; white-space: nowrap; box-sizing: border-box; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;}
.yl-app .tabs-card .tab-item.tab-size-md {padding: 5px 12px; font-size: var(--font-size-lead);}
.yl-app .tabs-card .tab-item.tab-size-lg {padding: 7px 16px; font-size: var(--font-size-h4);}
.yl-app .tabs-card .tab-item.active {background: var(--color-white); color: var(--primary-6); font-weight: var(--font-weight-medium); border-left: 1px solid var(--color-border-2); border-right: 1px solid var(--color-border-2); border-top: 1px solid transparent; border-bottom: 1px solid var(--color-white); box-shadow: inset 0 2px 0 0 var(--primary-6);}
.yl-app .status-tag-fill {padding: 0 6px;}
.yl-app .status-tag-fill.status-tag-processing, .yl-app .page-header-tag-info {background: var(--primary-2); color: var(--primary-6);}
.yl-app .status-tag-fill.status-tag-stop {background: var(--grey-3); color: var(--color-text-2);}
.yl-app .status-tag-text.status-tag-warning, .yl-app .popconfirm-icon-warning {color: var(--color-warning);}
.yl-app .status-tag-fill.status-tag-success {background: var(--success-2); color: var(--color-success);}
.yl-app .status-tag-fill.status-tag-warning {background: var(--warning-2); color: var(--color-warning);}
.yl-app .status-tag-fill.status-tag-processing {background: var(--primary-2); color: var(--color-primary);}
.yl-app .status-tag-fill.status-tag-error {background: var(--danger-2); color: var(--color-danger);}
.yl-app .yl-list-pager {padding: var(--space-4) 0; display: flex; align-items: center; justify-content: center;}
.yl-app .yl-list-pager > .pagination-wrapper {gap: var(--space-3);}
.yl-app .batch-review-pagination {display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) 0;}
.yl-app .form-mode-badge {display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: var(--font-size-caption, 12px); font-weight: 500;}
.yl-app .form-mode-badge.is-add {background: var(--color-success-bg); color: var(--color-success);}
.yl-app .form-mode-badge.is-edit, .yl-app .type-badge.type-basic {background: var(--color-primary-tag-bg); color: var(--color-primary);}
.yl-app .tree-count-badge {display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-primary-tag-bg); color: var(--color-primary); font-size: var(--font-size-caption, 12px); font-weight: 500;}
.yl-app .role-card {padding: var(--space-4); background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(150ms) ease, box-shadow var(150ms) ease, background-color var(150ms) ease;}
.yl-app .role-card.selected {border-color: var(--color-primary); background: var(--color-primary-tag-bg); box-shadow: inset 3px 0 0 var(--color-primary);}
.yl-app .type-badge {display: inline-flex; align-items: center; font-size: var(--font-size-caption); font-weight: 500; padding: 1px 8px; border-radius: 999px;}
.yl-app .type-badge.type-additional {background: var(--color-success-bg, #e8f5e9); color: var(--color-success, #2e7d32);}
.yl-app .preset-card {position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(150ms) ease, box-shadow var(150ms) ease;}
.yl-app .preset-card:hover {border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
.yl-app .preset-badge {position: absolute; top: var(--space-3); right: var(--space-3); font-size: var(--font-size-caption); color: var(--color-text-3); background: var(--color-bg-3, #f2f3f5); border-radius: 999px; padding: 1px 8px;}
.yl-app .operation-item-card, .staff-form-page .operation-item-card, .yl-app .operation-item-card.item-row, .staff-form-page .operation-item-card.item-row {border-bottom: 1px solid var(--color-border-2, #eaedf1); transition: background-color 150ms ease;}
.yl-app .operation-item-card.item-row:hover, .staff-form-page .operation-item-card.item-row:hover {background: var(--color-bg-4, #f6f8fa);}
.yl-app .page-header-comp {display: flex; flex-direction: column; align-items: stretch; background: var(--color-white); width: 100%; flex-shrink: 0; margin-bottom: var(--space-5);}
.yl-app .page-header-top {display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; min-height: 92px;}
.yl-app .page-header-comp[data-with-tabs="false"] .page-header-top {padding-bottom: 0; min-height: auto;}
.yl-app .page-header-left {display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
.yl-app .page-header-breadcrumb-item {font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-3); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; transition: color 0.15s; white-space: nowrap;}
.yl-app .page-header-breadcrumb-sep svg {width: 16px; height: 16px; color: var(--color-text-3); transform: rotate(-90deg);}
.yl-app .page-header-title {font-size: var(--font-size-h2); font-weight: var(--font-weight-medium); line-height: var(--line-height-h2); color: var(--color-text-1);}
.yl-app .page-header-tag {display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-body);}
.yl-app .page-header-tag-warning {background: var(--warning-1); color: #D25F00;}
.yl-app .page-header-tag-icon {width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.yl-app .tag-badge {display: inline-flex; align-items: center; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: var(--radius-sm); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); background: var(--primary-2); color: var(--primary-6); white-space: nowrap;}
.yl-app .tag-checkbox-group {display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 0;}
.yl-app .tag-checkbox {display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: var(--font-weight-regular);}
.yl-app .page-header-btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 5px 16px; border-radius: var(--radius-sm); border: none; background: var(--color-bg-4); box-shadow: 0px 0px 0px 1px var(--color-border-3), 0px 2px 1px 0px rgba(0,0,0,0.08); font-family: inherit; font-size: var(--font-size-lead); font-weight: var(--font-weight-medium); line-height: var(--line-height-h4); color: var(--color-text-2); cursor: pointer; white-space: nowrap; transition: all 150ms ease;}
.yl-app .page-header-btn:hover {box-shadow: 0px 0px 0px 1px rgba(22,100,255,0.8), 0px 2px 1px 0px rgba(0,0,0,0.08); color: var(--primary-6);}
.yl-app .page-header-btn-icon {display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: var(--radius-sm); border: none; background: var(--color-bg-4); box-shadow: 0px 0px 0px 1px var(--color-border-3), 0px 2px 1px 0px rgba(0,0,0,0.08); height: 32px; cursor: pointer; transition: all 150ms ease;}
.yl-app .page-header-tabs-spacer {flex-shrink: 0; box-shadow: none; background: var(--color-white); width: 32px; height: 36px;}
.yl-app .page-header-tabs-list {display: flex; align-items: flex-start; flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
.yl-app .page-header-tabs-gap {flex-shrink: 0; box-shadow: none; background: var(--color-white); width: 6px; height: 36px;}
.yl-app .page-header-tabs-end {flex: 1; box-shadow: none; background: var(--color-white); height: 36px;}
.yl-app .page-header-tab {display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px 4px 0 0; box-shadow: inset 0px 0px 0px 1px var(--color-border-2); background: var(--color-bg-4); padding: 7px 16px; font-family: inherit; font-size: var(--font-size-h4); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); color: var(--color-text-1); cursor: pointer; white-space: nowrap; transition: all 150ms ease; border: none; flex-shrink: 0;}
.yl-app .page-header-tab.active {background: var(--color-white); color: var(--primary-6); font-weight: var(--font-weight-medium); box-shadow: inset 0px 2px 0px 0px var(--color-primary), inset -1px 0px 0px 0px var(--color-border-2), inset 1px 0px 0px 0px var(--color-border-2);}
.yl-app .content-card {background: var(--color-white, #fff); border: 1px solid var(--color-border, #dde2e9); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.05)); margin-bottom: var(--space-6);}
.yl-app .content-card-footer {padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border, #dde2e9); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);}
.yl-app .content-card-header {padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);}
.yl-app .content-card-body {padding: var(--space-6);}
.yl-app .page-header .back-arrow {cursor: pointer; display: flex; align-items: center; color: var(--color-text-2);}
.yl-app .page-header h1 {font-size: 18px; font-weight: 500; color: var(--color-text-1);}
.yl-app .content .page-header-left {display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 12px;}
.yl-app .content .page-header-back {width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.yl-app .content .page-header-title {font-size: 18px; font-weight: 500; line-height: 26px; letter-spacing: 0.05px; color: var(--text-1); white-space: nowrap; flex-shrink: 0;}
.yl-app .content .page-header-tag {display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0.04px; flex-shrink: 0; white-space: nowrap;}
.yl-app .page-header-tag-success {background: var(--success-bg); color: var(--success-text);}
.yl-app .page-header-btn {display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 16px; border-radius: 4px; border: none; background: var(--color-bg-4); box-shadow: 0px 0px 0px 1px var(--color-border-3), 0px 2px 1px 0px rgba(0,0,0,0.08); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 22px; letter-spacing: 0.04px; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: all 150ms ease;}
.yl-app .page-header-btn-more {width: 32px; padding: 5px 0; font-size: 18px; letter-spacing: 2px;}
.yl-app .page-header-tabs-spacer {flex-shrink: 0; box-shadow: inset 0px -1px 0px 0px var(--border-1); background: var(--bg-white); width: 32px; height: 36px;}
.yl-app .page-header-tabs-gap {flex-shrink: 0; box-shadow: inset 0px -1px 0px 0px var(--border-1); background: var(--bg-white); width: 6px; height: 36px;}
.yl-app .page-header-tabs-end {flex: 1; box-shadow: inset 0px -1px 0px 0px var(--border-1); background: var(--bg-white); height: 36px;}
.yl-app .page-header-tab {display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px 4px 0 0; box-shadow: inset 0px 0px 0px 1px var(--border-1); background: var(--bg-sidebar); padding: 7px 16px; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: 0.04px; color: var(--text-1); cursor: pointer; white-space: nowrap; transition: all 150ms ease; border: none;}
.yl-app .page-header-tab.active {background: var(--bg-white); color: var(--primary-6); font-weight: 500; box-shadow: inset 0px 2px 0px 0px var(--primary-active), inset -1px 0px 0px 0px var(--border-1), inset 1px 0px 0px 0px var(--border-1);}
.yl-app .chart-card {border: 1px solid var(--border-1); border-radius: 4px; padding: 16px; background: var(--bg-white);}
.yl-app .chart-card-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;}
.yl-app .chart-card-title {display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-1);}
.yl-app .chart-card-title .info-icon {width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.yl-app .chart-card-expand {width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.yl-app .chart-card-subtitle {font-size: 12px; color: var(--text-3); margin-bottom: 8px;}
.yl-app .status-tag::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success-text); flex-shrink: 0;}
.yl-app .page-header-breadcrumb {display: flex; align-items: center; gap: 4px; margin-bottom: 4px;}
.yl-app .page-header-breadcrumb-item {font-size: 13px; color: var(--text-3); text-decoration: none; cursor: pointer;}
.yl-app .page-header-breadcrumb-item.current {color: var(--text-1); cursor: default;}
.yl-app .page-header-breadcrumb-sep {align-items: center; display: flex; height: 12px; justify-content: center; padding: var(--space-1); transform: rotate(-90deg); width: 12px;}
.yl-app .status-badge {display: inline-flex; align-items: center; gap: 6px; font-size: 13px;}
.yl-app .card-body {flex:1 1 auto;padding:20px;}
.yl-app .card-header {padding:14px 20px;border-bottom:1px solid var(--color-border-1,#f2f3f5);background:transparent;font-weight:var(--font-weight-medium,500);color:var(--color-text-1);border-radius:var(--radius-md) var(--radius-md) 0 0;}
.yl-app .card-footer {padding:14px 20px;border-top:1px solid var(--color-border-1,#f2f3f5);background:transparent;}
.yl-app .card-title {margin-bottom:8px;font-size:16px;font-weight:var(--font-weight-medium,500);color:var(--color-text-1);}
.yl-app .card-subtitle {margin-top:-4px;margin-bottom:8px;color:var(--color-text-3);}
.yl-app .card-text {margin-bottom:12px;color:var(--color-text-2,#4e5969);}
width:28px;height:28px; border:1px solid var(--color-border-3); .yl-app .pagination .page-link {position:relative; display:flex; align-items:center; justify-content:center; padding:0; color:var(--color-text-1); background:var(--color-white); border-radius:var(--radius-sm); text-decoration:none; cursor:pointer; transition:border-color 150ms ease,background 150ms ease,color 150ms ease; box-sizing:border-box;}
.yl-app .pagination .page-item.active .page-link {background:var(--primary-6); border-color:var(--primary-6); color:#fff; font-weight:var(--font-weight-medium,500);}
.yl-app .pagination .page-item.disabled .page-link {color:var(--text-yuanliNeutral-5,var(--color-text-4)); pointer-events:none; background:var(--grey-1,#f7f8fa); border-color:var(--color-border-2);}
.yl-app .content-card--plain {border: none; box-shadow: none; background: var(--color-white, #fff);}
.yl-app .content-card--plain > .content-card-header {padding: var(--space-2) 0; border-bottom: none;}
.yl-app .content-card--plain > .content-card-body {padding: var(--space-4) var(--space-8);}
.yl-app .content-card.list-card {background: transparent; border: none; border-radius: 0; box-shadow: none; margin-bottom: 0;}
.yl-app .content-card.list-card > .content-card-header {padding: 0 0 12px; border-bottom: none; border-radius: 0; background: transparent;}
.yl-app .content-card--plain .form-section {border-bottom: none; padding-bottom: 0; margin-bottom: 0; gap: var(--space-3);}
.yl-app .claim-info-card {background: var(--color-bg-1, #fff); border: 1px solid var(--color-border, #dde2e9); border-radius: var(--radius-md, 10px); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.04));}
.yl-app .claim-info-card.claim-info-bare {background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 4px;}
.yl-app .claim-info-card-group {background: transparent; border: 0; border-radius: 0; margin-bottom: 0; box-shadow: none; overflow: visible;}
.yl-app .claim-audit-card {border-color: var(--color-border-2, #c9d2df); background: var(--color-bg-2, #f7f9fc);}
.yl-app .course-badge {display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; background-color: rgba(78, 115, 223, 0.1); color: var(--color-primary, #1664ff); border: 1px solid rgba(78, 115, 223, 0.2);}
.yl-app .list-card {display: block; background: transparent; position: relative; box-sizing: border-box; transition: background 0.15s ease;}
.yl-app .list-card + .list-card {border-top: 1px solid var(--color-border, #dde2e9);}
.yl-app .pool-name-edit {cursor: pointer; display: inline-block; padding: 2px 6px; border-radius: 3px; transition: background 0.15s, color 0.15s; border-bottom: 1px dashed transparent;}
.yl-app .pool-name-edit:hover {background: rgba(22, 100, 255, 0.06); color: #1664ff; border-bottom-color: #1664ff;}
.yl-app .pool-detail-header {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; background: #fff; border-radius: 8px; margin-bottom: 16px;}
.yl-app .pool-detail-header__info {display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;}
.yl-app .pool-detail-header__title {font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; color: var(--text-primary, #1a1a2e);}
.yl-app .pool-detail-header__count {font-size: 13px; color: #6b7280; font-weight: 500;}
.yl-app .pool-detail-header__actions {display: flex; flex-wrap: wrap; gap: 6px;}
.yl-app .pool-detail-footer {display: flex; align-items: center; gap: 12px; padding: 8px 0; margin-top: 8px;}
.yl-app .pool-detail-footer__chip {display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, #6b7280);}
.yl-app .pool-detail-footer__chip i {color: var(--primary-6, #1664ff); font-size: 15px;}
.yl-app .pool-detail-footer__chip strong {color: var(--primary-6, #1664ff); font-weight: 700; font-size: 15px;}
@media (max-width: 768px) {
.yl-app .pool-detail-header {flex-direction: column; align-items: flex-start;}
.yl-app .pool-detail-header__actions {width: 100%;}
}
.yl-app .list-card-main {display: grid; grid-template-columns: 50px minmax(120px, 1.5fr) minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1fr); align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; font-size: var(--font-size-body, 12px); min-height: 44px; width: 100%; box-sizing: border-box;}
@media (max-width: 768px) {
.yl-app .list-header {display: none;}
.yl-app .list-card + .list-card {border-top: 1px solid var(--color-border, #dde2e9); margin-top: 0;}
.yl-app .list-card-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; grid-template-columns: none !important;}
.yl-app .list-col {flex: none; width: auto; padding: 0.5rem 0.25rem; background: transparent; border-bottom: 1px solid #eee;}
.yl-app .list-col-serial {order: 1; width: 15%;}
.yl-app .list-col-name {order: 2; width: 85%; font-weight: 600;}
.yl-app .list-col-actions {order: 9; width: 100%; padding-top: 0.5rem; border-top: 1px solid #eee; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem;}
}
.yl-app .pilots-container .list-card-main {grid-template-columns: 50px minmax(120px, 1.5fr) minmax(100px, 1fr) minmax(150px, 1.5fr) minmax(200px, 2fr) minmax(120px, 1fr) !important;}
.yl-app .teachers-container .list-card-main {grid-template-columns: 50px minmax(120px, 1.5fr) minmax(100px, 1fr) minmax(80px, 0.8fr) minmax(150px, 1.2fr) minmax(200px, 1.5fr) minmax(120px, 1fr) !important;}
@media (max-width: 768px) {
.yl-app .pilots-container, .yl-app .teachers-container {gap: 0; padding: 0;}
.yl-app .pilots-container .list-header, .yl-app .teachers-container .list-header, .yl-app .pilots-container .list-card::after, .yl-app .teachers-container .list-card::after {display: none;}
.yl-app .pilots-container .list-card, .yl-app .teachers-container .list-card {background: transparent;}
.yl-app .pilots-container .list-card-main, .yl-app .teachers-container .list-card-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; min-height: auto; grid-template-columns: none !important;}
.yl-app .pilots-container .list-col, .yl-app .teachers-container .list-col {flex: none; width: auto; padding: 0.5rem 0.25rem; background: transparent;}
.yl-app .pilots-container .list-col-serial, .yl-app .teachers-container .list-col-serial {order: 1; width: 15%; display: flex; color: var(--color-text-2, #42464e); font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .pilots-container .list-col-name, .yl-app .teachers-container .list-col-name {order: 2; width: 85%; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .pilots-container .list-col-experience, .yl-app .teachers-container .list-col-experience {order: 3; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .pilots-container .list-col-experience::before, .yl-app .teachers-container .list-col-experience::before {content: '飞行年限：'; color: var(--color-text-2, #42464e); font-weight: normal;}
.yl-app .pilots-container .list-col-badges, .yl-app .teachers-container .list-col-badges {order: 4; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .pilots-container .list-col-badges::before, .yl-app .teachers-container .list-col-badges::before {content: '标签：'; color: var(--color-text-2, #42464e);}
.yl-app .pilots-container .list-col-description, .yl-app .teachers-container .list-col-description {order: 5; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .pilots-container .list-col-description::before, .yl-app .teachers-container .list-col-description::before {content: '描述：'; color: var(--color-text-2, #42464e);}
.yl-app .teachers-container .list-col-title {order: 3; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teachers-container .list-col-title::before {content: '职称：'; color: var(--color-text-2, #42464e);}
.yl-app .pilots-container .list-col-actions, .yl-app .teachers-container .list-col-actions {order: 6; width: 100%; min-width: auto; padding-top: 0.5rem; border-top: 1px solid #eee; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem;}
}
.yl-app .employee-card {border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease;}
.yl-app .employee-card:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.yl-app .department-badge {font-size: 12px; color: #666; background-color: var(--color-bg-5, #f1f3f5); padding: 2px 8px; border-radius: 12px;}
.yl-app .document-type-badge {display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 500;}
.yl-app .service-card-main {display: grid; grid-template-columns: 60px 120px 2fr 100px 80px 120px 150px; align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; font-size: 0.9375rem; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box;}
@media (max-width: 1200px) {
.yl-app .service-card-main {grid-template-columns: 60px 1fr 1.5fr 100px 100px 100px 120px; gap: 0.75rem;}
}
@media (max-width: 992px) {
.yl-app .service-card-main {grid-template-columns: 60px 1fr 1fr 100px 100px 100px; gap: 0.5rem;}
}
.yl-app .client-type-badge {display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 12px; background-color: var(--color-bg-5, #f1f3f5); color: var(--color-text-1, #0c0d0e);}
.yl-app .client-type-badge.company {background-color: #cfe2ff; color: var(--color-primary-7, #0e42d2);}
.yl-app .client-type-badge.individual {background-color: #d1e7dd; color: var(--color-success, #2a814b);}
40px 50px minmax(140px, 1.2fr) minmax(100px, 0.9fr) minmax(150px, 1.3fr) minmax(100px, 0.9fr) minmax(100px, 0.9fr) 60px minmax(100px, 0.9fr) minmax(120px, 1.1fr) minmax(90px, 0.8fr) minmax(140px, 1.2fr) minmax(180px, 1.5fr); .yl-app .item-card-main {display: grid; grid-template-columns: align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; font-size: 0.9375rem; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box;}
@media (max-width: 768px) {
.yl-app .mobile-col-align-all {padding-left: 0 !important; padding-right: 0 !important;}
.yl-app .status-filter-wrapper {gap: 0.375rem !important;}
.yl-app .batch-actions-wrapper {padding: 0.75rem !important;}
.yl-app .batch-actions-wrapper > div {flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important;}
.yl-app .batch-actions {justify-content: center !important; flex-wrap: wrap !important;}
.yl-app .batch-info {width: 100% !important; text-align: center !important; margin-bottom: 0.5rem !important;}
.yl-app .services-list-wrapper, .yl-app .service-item-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .services-container, .yl-app .items-container {display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0.25rem; box-sizing: border-box;}
.yl-app .service-card, .yl-app .item-card {border: 1px solid var(--color-border, #dde2e9); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); width: 100%; max-width: 100%; margin: 0; box-sizing: border-box;}
.yl-app .service-card::after, .yl-app .service-header, .yl-app .item-card::after, .yl-app .item-header {display: none;}
.yl-app .empty-services, .yl-app .empty-items {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .empty-services i, .yl-app .empty-items i {font-size: 3rem;}
.yl-app .empty-services h5, .yl-app .empty-items h5 {font-size: 1rem;}
.yl-app .service-card-main {display: grid !important; grid-template-columns: 1fr 1fr; padding: 0.5rem; gap: 0.25rem; min-height: auto; width: 100%; box-sizing: border-box;}
.yl-app .service-col-serial {order: 1;}
.yl-app .service-col-type {order: 4;}
.yl-app .service-col-date {order: 6;}
.yl-app .service-col::before {content: attr(data-label); color: var(--color-text-2, #42464e); white-space: nowrap; flex-shrink: 0; margin-right: 0.25rem; min-width: 3em; text-align: left; font-weight: 500; font-size: 0.875rem;}
.yl-app .service-col-serial::before {content: '序号:';}
.yl-app .service-col-no::before {content: '服务编号:';}
.yl-app .service-col-no i {margin-right: 0.25rem; color: var(--color-primary, #1664ff); flex-shrink: 0;}
.yl-app .service-col-no {align-items: flex-start; display: flex; flex-direction: column; gap: 0.25rem; grid-column: 1 / -1; order: 2; overflow: visible; white-space: normal;}
.yl-app .service-col-client {align-items: flex-start; display: flex; flex-direction: column; gap: 0.25rem; grid-column: 1 / -1; order: 3; overflow: visible; white-space: normal;}
.yl-app .service-col-client::before {content: '客户信息:';}
.yl-app .service-col-client .client-info {width: 100%;}
.yl-app .service-col-type::before {content: '服务类型:';}
.yl-app .service-col-status {justify-content: flex-start; order: 5;}
.yl-app .service-col-status::before {content: '状态:';}
.yl-app .service-col-status .service-status {display: inline-block;}
.yl-app .service-col-date::before {content: '创建日期:';}
.yl-app .service-col-actions {border-top: 1px solid var(--color-border, #dde2e9); grid-column: 1 / -1; justify-content: flex-start; margin-top: 0.5rem; order: 7; padding-top: 0.5rem;}
.yl-app .service-col-actions::before {content: '操作:';}
.yl-app .item-card-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; min-height: auto; grid-template-columns: none !important;}
.yl-app .item-col {flex: none; width: auto; padding: 0.5rem 0.25rem;}
.yl-app .item-col-checkbox {order: 1; width: 10%;}
.yl-app .item-col-serial {order: 2; display: flex; color: var(--color-text-2, #42464e); font-size: 0.875rem; font-weight: 600; width: 10%; border-bottom: 1px solid #eee;}
.yl-app .item-col-part-number {order: 3; width: 80%; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid #eee; color: var(--color-primary-5, #4080ff);}
.yl-app .item-col-part-number i {margin-right: 0.5rem;}
.yl-app .item-col-simple-part-number {order: 4; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-simple-part-number::before {content: '简易料号：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-product-name {order: 5; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-product-name::before {content: '产品名称：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-applicable-model {order: 6; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-applicable-model::before {content: '适用机型：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-product-series {order: 7; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-product-series::before {content: '产品系列：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-unit {order: 8; width: 25%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-unit::before {content: '单位：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-material-attribute {order: 9; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-material-attribute::before {content: '物料属性：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-material-usage {order: 10; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-material-usage::before {content: '物料用途：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-local-repair-price {order: 11; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-local-repair-price::before {content: '本地维修价：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-created-at {order: 12; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-created-at::before {content: '创建时间：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-actions {order: 13; width: 100%; padding-top: 0.5rem; justify-content: flex-start;}
.yl-app .service-card-main {grid-template-columns: 1fr;}
.yl-app .service-col {align-items: flex-start; box-sizing: border-box; display: flex; font-size: 0.875rem; justify-content: flex-start; min-height: 1.5em; min-width: 0; overflow: hidden; padding: 0.25rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
}
@media (max-width: 575.98px) {
.yl-app .service-card-main {grid-template-columns: 1fr;}
}
/* 默认：独立 Tab 栏无负边距，避免在 .container-fluid(15px padding) 中撑出横向滚动 */
.yl-app .page-header-tabs {align-items: flex-start; display: flex; flex-shrink: 0; margin-left: 0; margin-right: 0; border-bottom: 1px solid var(--color-border-2, #e8eaed);}
/* 仅在 .page-header-comp 内部时才用负边距抵消 32px padding，做贴边效果 */
.yl-app .page-header-comp .page-header-tabs {margin-left: -32px; margin-right: -32px;}
@media (max-width: 992px) {
.yl-app .page-header-comp .page-header-tabs {margin-left: -27px; margin-right: -27px;}
}
.yl-app .page-header-tabs .page-header-tab:not(.active) {background-color: var(--color-bg-5, #f1f3f5); color: var(--text-1);}
.yl-app .page-header-comp {display: flex; flex-direction: column; align-items: stretch; width: 100%; flex-shrink: 0; position: sticky; top: 0; z-index: 30; background: var(--color-bg-1, #ffffff); border-bottom: 2px solid #e1e1e1; box-shadow: var(--shadow-1, 0 1px 2px rgba(12, 13, 14, 0.05)); margin-bottom: var(--space-6, 24px);}
.yl-app .page-header-top {display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); padding: var(--space-5, 20px) var(--space-8, 32px); min-height: 80px;}
.yl-app .page-header-comp[data-with-tabs="false"] .page-header-top {padding-bottom: var(--space-5, 20px); min-height: 80px;}
.yl-app .page-header-left, .yl-app .page-header-title-row {display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2, 8px); min-width: 0;}
.yl-app .page-header-breadcrumb {display: flex; align-items: center; gap: 2px; margin-bottom: 2px;}
.yl-app .page-header-title {margin: 0; font-size: var(--font-size-h1, 20px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-h1, 28px); letter-spacing: -0.01em; color: var(--color-text-1, #0c0d0e);}
.yl-app .page-header-left > p, .yl-app .page-header-desc {margin: 0; font-size: var(--font-size-lead, 13px); line-height: var(--line-height-lead, 22px); color: var(--color-text-3, #737a87);}
.yl-app .page-header-tag {display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-sm, 4px); font-size: var(--font-size-body, 12px); font-weight: var(--font-weight-medium, 500); line-height: var(--line-height-body, 20px); white-space: nowrap;}
.yl-app .page-header-tag-success {background: var(--success-2, #e1f6e6); color: var(--success-6, #2a814b);}
.yl-app .page-header-tag-warning {background: var(--warning-2, #fff3dc); color: var(--warning-6, #bd7e00);}
.yl-app .page-header-tag-error {background: var(--danger-2, #ffecec); color: var(--danger-6, #d7312a);}
.yl-app .page-header-tag-info {background: var(--primary-2, #ebf1ff); color: var(--primary-6, #1664ff);}
.yl-app .page-header-tag-icon {width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.yl-app .page-header-actions {display: flex; align-items: center; gap: var(--space-3, 12px); flex-shrink: 0; flex-wrap: wrap;}
.yl-app .page-header-btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1, 4px); padding: 6px 16px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--color-border-3, #dde2e9); background: var(--color-bg-1, #ffffff); font-family: inherit; font-size: var(--font-size-lead, 13px); font-weight: var(--font-weight-medium, 500); line-height: var(--line-height-h4, 22px); color: var(--color-text-2, #42464e); cursor: pointer; white-space: nowrap; text-decoration: none; transition: all 150ms ease;}
.yl-app .page-header-btn-primary {border-color: var(--color-primary, #1664ff); background: var(--color-primary, #1664ff); color: #fff;}
.yl-app .page-header-btn-primary:hover {border-color: var(--color-primary-active, #0b4fd1); background: var(--color-primary-active, #0b4fd1); color: #fff;}
.yl-app .page-header-btn:hover {border-color: var(--color-primary, #1664ff); color: var(--color-primary, #1664ff); background: var(--primary-1, #f3f7ff);}
.yl-app .page-header-btn-icon {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm, 4px); border: 1px solid var(--color-border-3, #dde2e9); background: var(--color-bg-1, #ffffff); color: var(--color-text-2, #42464e); cursor: pointer; transition: all 150ms ease;}
.yl-app .page-header-btn-icon:hover {background: var(--primary-1, #f3f7ff); border-color: var(--color-primary, #1664ff); box-shadow: 0px 0px 0px 1px rgba(22,100,255,0.8), 0px 2px 1px 0px rgba(0,0,0,0.08); color: var(--color-primary, #1664ff);}
.yl-app .page-header-btn-icon svg {color: var(--color-text-2); height: 16px; width: 16px;}
@media (max-width: 768px) {
.yl-app .page-header-top {flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); padding: var(--space-4, 16px); min-height: 0;}
.yl-app .page-header-actions {width: 100%; flex-wrap: wrap;}
.yl-app .page-header-comp .page-header-tabs {margin-left: -16px; margin-right: -16px;}
}
.yl-app .page-header-tabs-list, .yl-app .yl-list-table-wrap, .yl-app .table-responsive {scrollbar-width: thin; scrollbar-color: var(--color-border-3, #dde2e9) transparent;}
.yl-app .page-header-tabs-list::-webkit-scrollbar, .yl-app .yl-list-table-wrap::-webkit-scrollbar, .yl-app .table-responsive::-webkit-scrollbar {height: 8px;}
.yl-app .page-header-tabs-list::-webkit-scrollbar-thumb, .yl-app .yl-list-table-wrap::-webkit-scrollbar-thumb, .yl-app .table-responsive::-webkit-scrollbar-thumb {background: var(--color-border-3, #dde2e9); border-radius: 4px;}
.yl-app .status-tag::before, .yl-app .status-tag::after {content: none !important; display: none !important;}
.yl-app .status-tag-fill {padding: 0 6px 0 2px; border: none;}
.yl-app .status-tag-bordered {padding: 0 6px 0 2px; border: 1px solid transparent; background: var(--color-bg-5, #f1f3f5);}
.yl-app .status-tag-bordered.status-tag-success {background: var(--success-1, #eef9f1); border-color: var(--success-3, #7ccd94); color: var(--success-6, #2a814b);}
.yl-app .status-tag-bordered.status-tag-warning {background: var(--warning-1, #fef8eb); border-color: var(--warning-3, #f9c76d); color: var(--warning-6, #bd7e00);}
.yl-app .status-tag-bordered.status-tag-error {background: var(--danger-1, #fdf5f5); border-color: var(--danger-3, #ffa3a0); color: var(--danger-6, #d7312a);}
.yl-app .status-tag-bordered.status-tag-processing, .yl-app .status-tag-bordered.status-tag-loading {background: var(--primary-1, #f3f7ff); border-color: var(--primary-3, #97bcff); color: var(--primary-6, #1664ff);}
.yl-app .status-tag-bordered.status-tag-stop, .yl-app .status-tag-bordered.status-tag-neutral {background: var(--color-bg-5, #f1f3f5); border-color: var(--color-border-3, #dde2e9); color: var(--color-text-2, #42464e);}
.yl-app .status-tag-bordered.status-tag-waiting {background: var(--violet-1, #faf4ff); border-color: var(--violet-3, #c1a3ed); color: var(--violet-6, #6e4c9f);}
.yl-app .status-tag-fill.status-tag-neutral {background: var(--color-bg-5, #f1f3f5); color: var(--color-text-2, #42464e);}
.yl-app .status-tag-text.status-tag-approved {color: #2a814b;}
.yl-app .status-tag-fill.status-tag-approved {background: #eef9f1; color: #2a814b;}
.yl-app .status-tag-bordered.status-tag-approved {background: #eef9f1; border-color: #7ccd94; color: #2a814b;}
.yl-app .status-tag-text.status-tag-done, .yl-app .pbx-sum-accent .pbx-sum-num {color: #1664ff;}
.yl-app .status-tag-fill.status-tag-done {background: #f3f7ff; color: #1664ff;}
.yl-app .status-tag-bordered.status-tag-done {background: #f3f7ff; border-color: #97bcff; color: #1664ff;}
.yl-app .page-header-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; font-size: 13px; color: var(--text-muted, #86909c);}
.yl-app .page-header-meta .meta-item {display: inline-flex; align-items: center; gap: 6px;}
.yl-app .page-header-meta .meta-item b {color: var(--text-color-text-regular, #1d2129); font-weight: 600;}
.yl-app .company-list .list-card-main {grid-template-columns: 56px minmax(160px, 2fr) minmax(120px, 1.4fr) minmax(90px, 1fr) minmax(100px, 1.2fr) minmax(150px, 2fr) minmax(90px, 1fr) minmax(120px, 1.4fr) 80px 110px 130px;}
.yl-app .records-wrapper .list-card {background: transparent; border: none;}
.yl-app .records-wrapper .list-card:hover {background: transparent !important;}
.yl-app .records-wrapper .list-card.client-row {background: #fff !important;}
.yl-app .records-wrapper .list-card-main {align-items: center;}
@media (max-width: 768px) {
.yl-app .records-wrapper .list-card-main {display: grid !important;}
}
.yl-app .navigation-list .list-card-main {grid-template-columns: 50px minmax(150px, 1.5fr) minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(80px, 0.6fr) minmax(100px, 0.8fr) minmax(80px, 0.6fr) minmax(120px, 1fr);}
@media (max-width: 768px) {
.yl-app .navigation-list .list-card-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; grid-template-columns: none !important;}
.yl-app .navigation-list .list-col {flex: none; width: auto; padding: 0.5rem 0.25rem; border-bottom: 1px solid #eee;}
.yl-app .navigation-list .list-col-serial {order: 1; width: 15%;}
.yl-app .navigation-list .list-col-title {order: 2; width: 85%; font-weight: 600;}
.yl-app .navigation-list .list-col-status {order: 3; width: 50%;}
.yl-app .navigation-list .list-col-position {order: 4; width: 50%;}
.yl-app .navigation-list .list-col-sort {order: 5; width: 50%;}
.yl-app .navigation-list .list-col-slide {order: 6; width: 50%;}
.yl-app .navigation-list .list-col-actions {order: 7; width: 100%; padding-top: 0.5rem; border-top: 1px solid #eee; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem;}
}
.yl-app .qrcode-card {flex: 1; min-width: 300px; border-radius: 10px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); padding: 20px; background-color: #f8f9fc;}
.yl-app .godown-card, .yl-app .type-card {border-radius: 10px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); border: none; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; background: #fff;}
.yl-app .godown-card:hover, .yl-app .type-card:hover, .yl-app .business-card:hover {transform: translateY(-5px); box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);}
.yl-app .godown-card-header, .yl-app .type-card-header {background-color: #fff; border-bottom: 1px solid var(--border-yuanliBorder-1, #eaedf1); padding: 1rem 1.5rem; border-radius: 10px 10px 0 0;}
.yl-app .business-card {border-radius: 10px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); border: none; transition: all 0.3s ease; height: 100%; background: #fff;}
.yl-app .business-card-header {background-color: var(--primary, #1664ff); color: #fff; padding: 1rem 1.5rem; border-radius: 10px 10px 0 0;}
.yl-app .student-courses-box .cert-badge {display: inline-block; padding: 0.1rem 0.4rem; border-radius: 0.2rem; font-size: 0.7rem; font-weight: 500; margin-left: 0.25rem;}
.yl-app .cert-badge.issued {background: var(--color-success-bg, #d1fae5); color: var(--color-success, #2a814b);}
.yl-app .cert-badge.pending {background: var(--color-warning-bg, #fef3c7); color: var(--color-warning, #bd7e00);}
.yl-app .cert-badge.expired {background: var(--color-danger-bg, #fee2e2); color: var(--color-danger, #d7312a);}
.yl-app .godown-badge, .yl-app .type-badge {font-size: 0.9rem; padding: 4px 10px; border-radius: 12px; font-weight: 500;}
.yl-app .inventory-type-badge {font-size: 0.8rem; padding: 3px 8px; border-radius: 10px; font-weight: 500;}
.yl-app .navigation-card-main {display: grid; grid-template-columns: 50px minmax(150px, 1.5fr) minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(80px, 0.6fr) minmax(100px, 0.8fr) minmax(80px, 0.6fr) minmax(120px, 1fr); align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; font-size: 0.9375rem; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box;}
.yl-app .banner-card-plain.content-card {border: none; box-shadow: none; background: transparent; margin-bottom: 0;}
.yl-app .banner-card-plain .content-card-header {border-bottom: none; padding: 0 0 var(--space-4, 16px) 0;}
.yl-app .banner-card-plain .content-card-body, .yl-app .filter-dropdown .fd-list {padding: 0;}
.yl-app .banner-type-badge {position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 10px; font-size: 11px; font-weight: 500; line-height: 1.6; border-radius: 999px; color: #fff; background: var(--color-primary, #1664ff); box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none;}
.yl-app .banner-type-badge--neutral {background: rgba(66,70,78,.82);}
.yl-app .info-card {background: linear-gradient(135deg, var(--color-bg-5, #f1f3f5) 0%, var(--color-border, #dde2e9) 100%); border-radius: 10px; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid var(--color-border, #dde2e9);}
.yl-app .info-card h4 {color: var(--color-text-1, #0c0d0e); margin-bottom: 1rem; font-weight: 600; border-bottom: 1px solid var(--color-border, #dde2e9); padding-bottom: 0.5rem;}
.yl-app .action-card {cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;}
.yl-app .action-card:hover {transform: translateY(-5px); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);}
.yl-app .card-icon {font-size: 2.2rem; color: var(--color-primary);}
.yl-app .option-card {border: 1px solid var(--color-border, #dde2e9); border-radius: 10px; padding: 20px; margin-bottom: 20px; background: var(--color-bg-1, #fff);}
.status-tag-icon {flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;}
.status-tag-icon svg {width: 14px; height: 14px; display: block;}
.status-tag-text.status-tag-success, .status-tag.status-tag-success, .status-tag-text.status-tag-approved, .status-tag.status-tag-approved {color: #2A814B;}
.status-tag-text.status-tag-warning, .status-tag.status-tag-warning {color: #BD7E00;}
.status-tag-text.status-tag-error, .status-tag.status-tag-error {color: #D7312A;}
.status-tag-text.status-tag-processing, .status-tag.status-tag-processing, .status-tag-text.status-tag-done, .status-tag.status-tag-done {color: #1664FF;}
.status-tag-text.status-tag-stop, .status-tag.status-tag-stop, .status-tag-text.status-tag-neutral, .status-tag.status-tag-neutral {color: #42464E;}
.status-tag-text.status-tag-waiting, .status-tag.status-tag-waiting {color: #6E4C9F;}
.status-tag-bordered {padding: 0 6px 0 2px; border: 1px solid transparent; background: #F1F3F5; border-radius: 4px;}
.status-tag-bordered.status-tag-success, .status-tag-bordered.status-tag-approved {background: #EEF9F1; border-color: #7CCD94; color: #2A814B;}
.status-tag-bordered.status-tag-warning {background: #FEF8EB; border-color: #F9C76D; color: #BD7E00;}
.status-tag-bordered.status-tag-error {background: #FDF5F5; border-color: #FFA3A0; color: #D7312A;}
.status-tag-bordered.status-tag-processing, .status-tag-bordered.status-tag-done {background: #F3F7FF; border-color: #97BCFF; color: #1664FF;}
.status-tag-bordered.status-tag-stop, .status-tag-bordered.status-tag-neutral {background: #F1F3F5; border-color: #DDE2E9; color: #42464E;}
.status-tag-bordered.status-tag-waiting {background: #FAF4FF; border-color: #C1A3ED; color: #6E4C9F;}
.status-tag-fill.status-tag-approved {background: #EEF9F1; color: #2A814B;}
.status-tag-fill.status-tag-done {background: #F3F7FF; color: #1664FF;}
--hdr-radius-btn: 4px; --sidebar-nav-hover: rgba(22, 100, 255, 0.08); --sidebar-width: 240px; --hdr-surface: #f6f8fa; --hdr-surface-hover: #f1f3f5; --hdr-surface-active: #f1f3f5; --hdr-text: #0c0d0e; --hdr-border-strong: #dde2e9; --hdr-danger-bg: #fdf5f5; --hdr-success: #2a814b; --hdr-danger-hover: #ee3f38; --sidebar-active-bg: #f3f7ff; --sidebar-border: #eaedf1; --hdr-danger: #d7312a; --hdr-accent-active: #0055ff; --hdr-accent-hover: #387bff; --hdr-accent-bg: #ebf1ff; --sidebar-submenu-active-bg: #f0f0f0; --hdr-focus-ring: 0 0 0 3px rgba(22, 100, 255, 0.3); --hdr-shadow-menu: 0 8px 24px rgba(12, 13, 14, 0.12); --sidebar-active: #1664ff; --hdr-height: 58px; --hdr-success-bg: #eef9f1; --hdr-text-2: #42464e; --sidebar-icon: #737a87; --hdr-text-secondary: #737a87; --sidebar-text-strong: #0c0d0e; --hdr-text-muted: #86909c; --sidebar-accent: #1664ff; --hdr-accent: #1664ff; --hdr-text-disabled: #c7ccd6; --footer-height: 80px; --sidebar-text: #42464e; --hdr-radius-pill: 9999px; --hdr-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); --hdr-radius-card: 8px; --sidebar-bg: #ffffff; :root {--content-bg: #f8f9fa; --hdr-bg: #ffffff; --hdr-border: #eaedf1; --hdr-font: 0.8125rem; --hdr-shadow: 0 1px 2px rgba(12, 13, 14, 0.06); --header-height: 58px; --sidebar-collapsed-width: 80px; --sidebar-hover: #f1f3f5; --transition-speed: 0.3s;}
.notification-badge, .notification-count-badge {position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; font-weight: 700; line-height: 14px; color: #fff; background: var(--hdr-danger); border-radius: var(--hdr-radius-pill); text-align: center; border: 1.5px solid var(--hdr-bg);}
@keyframes badge-pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}
.notification-count-badge {animation: badge-pulse 2s ease-in-out infinite;}
.yl-app .popconfirm-header {display: flex; align-items: flex-start; gap: var(--space-2);}
.yl-app .popconfirm-icon {flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center;}
.yl-app .popconfirm-title {font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); line-height: var(--line-height-h4); color: var(--color-text-1);}
.yl-app .popconfirm-description {font-size: var(--font-size-lead); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); color: var(--color-text-2); margin: 4px 0 0 24px;}
.yl-app .popconfirm-simple .popconfirm-description {margin-left: 0;}
.yl-app .popconfirm-footer {display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3);}
.yl-app .popconfirm-comment {margin-top: var(--space-3);}
.yl-app .popconfirm-comment-label {display: block; font-size: var(--font-size-lead); color: var(--color-text-2); margin-bottom: 4px;}
.yl-app .popconfirm-comment-input {width: 100%; border: 1px solid var(--color-border-3, #e3e8ef); border-radius: var(--radius-sm, 6px); padding: 6px 8px; font-size: var(--font-size-lead); color: var(--color-text-1); line-height: var(--line-height-body); resize: vertical; font-family: inherit; min-height: 56px;}
.yl-app .popconfirm-comment-input:focus {outline: none; border-color: var(--primary-6, #1664FF); box-shadow: 0 0 0 2px rgba(22,100,255,0.12);}
.yl-app .popconfirm-arrow {position: absolute; width: 8px; height: 8px; background: var(--color-white); border: 1px solid var(--color-border-3); transform: rotate(45deg); bottom: -5px; left: 50%; margin-left: -4px; border-top: none; border-left: none;}
.yl-app .popconfirm .btn-secondary:hover {box-shadow: 0 0 0 1px rgba(22,100,255,0.8);}
.yl-app .popconfirm .btn-danger:hover {background: var(--status-yuanliDanger-5);}
.yl-app .vc-modal-mask.is-open, .vc-modal-mask.is-open {opacity: 1; visibility: visible;}
.yl-app .vc-modal-h h3 {font-size: var(--font-size-title); font-weight: var(--font-weight-semibold); color: var(--color-text-1); margin: 0; display: flex; align-items: center; gap: var(--space-2);}
.yl-app .modal-close {width: 24px; height: 24px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-3); transition: background 150ms ease;}
.vc-modal-mask.centered-clear {background: transparent; z-index: 1090;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-header {display: flex; align-items: center; gap: 10px; margin-bottom: 12px;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon {flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon-warning {background: #fef3cd; color: #856404;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon-success {background: #e1f6e6; color: #2a814b;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon-info {background: #ebf1ff; color: #1664ff;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-icon-danger {background: #fde2e2; color: #d7312a;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-title {font-size: 16px; font-weight: 600; color: var(--color-text-1, #0c0d0e);}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-description {font-size: 14px; line-height: 1.6; color: var(--color-text-2, #42464e); margin-bottom: 20px;}
.vc-modal-mask:not(.popconfirm-mode) .popconfirm-footer {display: flex; justify-content: flex-end; gap: 10px;}
.vc-modal-mask.popconfirm-mode {display: block; pointer-events: none; background: transparent; z-index: 1090;}
.vc-modal-mask.popconfirm-mode .popconfirm-arrow {display: block; position: absolute; top: -5px; width: 8px; height: 8px; background: var(--color-bg-1, #fff); border-left: 1px solid var(--color-border-3, #e3e8ef); border-top: 1px solid var(--color-border-3, #e3e8ef); transform: rotate(45deg);}
.vc-modal-mask.popconfirm-mode .popconfirm-arrow.popconfirm-arrow-bottom {top: auto; bottom: -5px; border-left: none; border-top: none; border-right: 1px solid var(--color-border-3, #e3e8ef); border-bottom: 1px solid var(--color-border-3, #e3e8ef);}
body.modal-open {overflow:hidden;}
.modal.fade .modal-dialog {transition:transform .25s ease-out;transform:translate(0,-40px);}
.modal.show .modal-dialog {transform:none;}
.modal-dialog {position:relative;width:auto;margin:.5rem;pointer-events:none;}
@media (min-width:576px) {
.modal-dialog {max-width:520px;margin:1.75rem auto;}
.modal-sm {max-width:360px;}
}
@media (min-width:992px) {
.modal-lg,.modal-xl {max-width:800px;}
}
@media (min-width:1200px) {
.modal-xl {max-width:1080px;}
}
.modal-dialog-centered {display:flex;align-items:center;min-height:calc(100% - 1rem);}
@media (min-width:576px) {
.modal-dialog-centered {min-height:calc(100% - 3.5rem);}
}
.modal-dialog-scrollable {height:calc(100% - 1rem);}
.modal-dialog-scrollable .modal-content {max-height:100%;overflow:hidden;}
.modal-dialog-scrollable .modal-body {overflow-y:auto;}
.modal-content {position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:var(--color-bg-1,#fff);background-clip:padding-box;border:1px solid var(--color-border-1,#f2f3f5);border-radius:var(--radius-lg,12px);box-shadow:var(--shadow-3,0 8px 20px rgba(0,0,0,.08));outline:0;}
.modal-header {display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-border-1,#f2f3f5);}
.modal-title {margin:0;font-size:16px;font-weight:var(--font-weight-medium,500);line-height:1.5;color:var(--color-text-1);}
.modal-body {position:relative;flex:1 1 auto;padding:20px;color:var(--color-text-1);}
.modal-footer {display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--color-border-1,#f2f3f5);}
.modal-backdrop.fade {opacity:0;transition:opacity .15s linear;}
.icon-picker-modal {display: none !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.icon-picker-modal.active, .icon-picker-modal.show {display: flex !important; opacity: 1; visibility: visible;}
.modal-content {pointer-events: auto;}
.yl-app #staffSelectModal .modal-dialog {max-width: 500px; position: relative; z-index: 999999;}
.yl-app #staffSelectModal .modal-content {position: relative; z-index: 999999;}
#deleteConfirmModal .modal-dialog {max-width: 400px;}
#deleteConfirmModal .modal-content {border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);}
#deleteConfirmModal .modal-header {border-bottom: 1px solid var(--color-border, #dde2e9); padding: 1rem 1.5rem;}
#deleteConfirmModal .modal-title {font-size: 1.1rem; font-weight: 600; color: var(--color-primary, #1664ff);}
#deleteConfirmModal .modal-body {padding: 1.5rem; font-size: 1rem; color: var(--color-text-2, #42464e);}
#deleteConfirmModal .modal-body strong {color: var(--color-danger, #d7312a); font-weight: 600;}
#deleteConfirmModal .modal-footer {border-top: 1px solid var(--color-border, #dde2e9); padding: 1rem 1.5rem; justify-content: flex-end; gap: 0.5rem;}
.yl-app .search-modal-actions {display: flex; gap: 0.5rem;}
.yl-app .yl-modal-overlay {position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 24px; background: transparent; overflow-y: auto; animation: ylModalFade 0.2s ease both;}
.yl-app .yl-modal {position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(88vh, 760px); margin: auto; background: #fff; border-radius: var(--radius-lg, 12px); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12), 0 24px 64px rgba(17, 24, 39, 0.22); overflow: hidden; animation: ylModalPop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;}
.yl-app .yl-modal--lg {max-width: 760px;}
.yl-app .yl-modal--xl {max-width: 800px; max-height: min(88vh, 840px);}
.yl-app .yl-modal-close {flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin: -4px -6px -4px 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--color-text-3, #8a9099); font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;}
.yl-app .yl-modal-close:hover {background: var(--color-bg-5, #f1f3f5); color: var(--color-text-1, #1f2329);}
.yl-app .yl-modal-close:active {transform: scale(0.94);}
.yl-app .yl-modal-head {flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--color-border-2, #eef0f3);}
.yl-app .yl-modal-head h3 {margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.2px; color: var(--color-text-1, #1f2329);}
.yl-app .yl-modal-body {flex: 1 1 auto; padding: 22px 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-3, #dde2e9) transparent;}
.yl-app .yl-modal-body::-webkit-scrollbar {width: 8px;}
.yl-app .yl-modal-body::-webkit-scrollbar-thumb {background: var(--color-border-3, #dde2e9); border-radius: 8px;}
.yl-app .yl-modal-body::-webkit-scrollbar-thumb:hover {background: #c7cdd6;}
.yl-app .yl-modal-foot {flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-border-2, #eef0f3); background: var(--color-bg-5, #fafbfc);}
@media (max-width: 600px) {
.yl-app .yl-modal-overlay {padding: 0;}
.yl-app .yl-modal {max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0;}
.yl-app .yl-modal-body {padding: 18px 16px;}
.yl-app .yl-modal-head, .yl-app .yl-modal-foot {padding-left: 16px; padding-right: 16px;}
}
.yl-app .navigation-modal-header, .yl-app .payment-method-modal-header, .yl-app .website-url-modal-header, .yl-app .business-modal-header {background: var(--primary, #1664ff); color: #fff;}
.yl-app #importModal .modal-content {border: none; border-radius: 12px; box-shadow: 0 20px 48px -8px rgba(12,13,14,.18), 0 8px 20px rgba(12,13,14,.08); overflow: hidden;}
.yl-app #importModal .modal-body {padding: 20px;}
.yl-app .business-modal .modal-content, .yl-app .godown-modal .modal-content, .yl-app .type-modal .modal-content {border-radius: 10px; overflow: hidden;}
.yl-app .godown-modal-header, .yl-app .type-modal-header {background-color: var(--color-primary, #1664ff); color: white;}
.yl-app .icon-picker-modal {display: none !important; z-index: 99999 !important;}
.yl-app #clientAttachmentsModal .attachments-grid .image-preview.file-preview, .yl-app #attachmentsList .attachments-grid .image-preview.file-preview, .yl-app #attachmentsModal .attachments-grid .image-preview.file-preview {background-color: var(--color-bg-3); display: flex; align-items: center; justify-content: center;}
.yl-app .vc-menu-tree {display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; padding: 4px 2px;}
.yl-app .vc-menu-group {border: 1px solid var(--color-border-3); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--color-bg-3);}
.yl-app .vc-menu-group-title {font-weight: var(--font-weight-medium); color: var(--color-text-1); margin-bottom: 6px; font-size: var(--font-size-h4);}
.yl-app .vc-check-row {display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; font-size: var(--font-size-body); color: var(--color-text-2);}
.yl-app .vc-check-list {background: var(--color-bg-3);}
.yl-app .vc-tag {display: inline-block; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 11px;}
.yl-app .vc-tag--soft {background: var(--color-bg-4); color: var(--color-text-3); margin-left: 2px;}
.yl-app .mini-perm-ops {display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 10px 26px; padding: 6px 10px; background: var(--color-bg-1); border: 1px dashed var(--color-border-3); border-radius: var(--radius-sm);}
.yl-app .vc-check-row--sm {margin: 0; font-size: var(--font-size-sm); color: var(--color-text-2);}
.yl-app .vc-perm-tree {display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow: auto; padding: 4px 2px;}
.yl-app .vc-perm-toolbar {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.yl-app .vc-perm-count {font-size: 13px; color: var(--color-text-3);}
.yl-app .vc-perm-head {display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background-color .15s;}
.yl-app .vc-perm-head:hover, .yl-app .vc-perm-row:hover {background-color: var(--color-bg-2);}
.yl-app .vc-perm-caret {font-size: 12px; color: var(--color-text-3); width: 14px; text-align: center; flex-shrink: 0;}
.yl-app .vc-perm-title {font-weight: var(--font-weight-medium); color: var(--color-text-1); font-size: var(--font-size-body);}
.yl-app .vc-perm-role-tag {margin-left: 6px;}
.yl-app .vc-perm-node-actions {margin-left: auto; display: flex; gap: 12px; align-items: center; flex-shrink: 0;}
.yl-app .vc-perm-node-all {font-size: 12px; color: var(--primary-6); background: none; border: none; cursor: pointer; padding: 0; line-height: 1;}
.yl-app .vc-perm-children {display: flex; flex-direction: column; padding-left: 22px; margin: 2px 0 6px; border-left: 2px solid var(--color-border-3);}
.yl-app .vc-perm-row {display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color .15s;}
.yl-app .vc-perm-name {font-size: var(--font-size-body); color: var(--color-text-2);}
.yl-app .vc-perm-name code {color: var(--color-text-3); font-size: 12px; margin-left: 4px;}
.yl-app .vc-perm-badge {display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 1; margin-left: auto;}
.yl-app .vc-perm-badge.is-op {background: var(--color-bg-4); color: var(--color-text-3);}
.yl-app .vc-perm-row.is-disabled {opacity: .45; pointer-events: none;}
.yl-app .vc-perm-empty {padding: 20px; text-align: center; color: var(--color-text-3); font-size: 13px;}
.yl-app .status-filter-btn:hover, .yl-app .operation-status-btn:hover {color: var(--color-primary, #1664ff); border-color: var(--color-primary, #1664ff); z-index: 1; position: relative;}
.yl-app .status-filter-btn.active, .yl-app .operation-status-btn.active {color: var(--color-primary, #1664ff); background: var(--color-primary-container, #f3f7ff); border-color: var(--color-primary, #1664ff); z-index: 2; position: relative;}
@media (max-width: 768px) {
.yl-app .filter-group {flex-wrap: wrap;}
}
.yl-app .tab-panel {padding: 16px 0; font-size: var(--font-size-lead); color: var(--color-text-2); line-height: var(--line-height-h4);}
.yl-app .filter-bar.filter-bar--task {display: flex; flex-direction: column; gap: 12px; padding: 0; margin-bottom: var(--space-4); align-items: flex-start;}
.yl-app .filter-bar--task .filter-row {display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 12px;}
.yl-app .filter-bar--task .filter-row--main {flex-wrap: wrap; gap: 14px;}
.yl-app .filter-bar--task .filter-row--sub {justify-content: space-between; flex-wrap: nowrap;}
.yl-app .filter-bar--task .search-field:focus-within, .yl-app .filter-bar--task .filter-select:focus, .yl-app .filter-bar--task .filter-field .filter-input:focus, .yl-app .filter-bar--task .filter-range .filter-input:focus {border-color: var(--primary-6, #1664ff); box-shadow: 0 0 0 3px rgba(22,100,255,.15);}
.yl-app .filter-bar--task .search-field-icon {flex-shrink: 0; font-size: 14px; color: var(--color-text-3, #737a87); margin-right: 6px;}
.yl-app .filter-bar--task .search-field-input {flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--color-text-1, #0c0d0e);}
.yl-app .filter-bar--task .search-field-clear {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-3, #737a87); cursor: pointer; border-radius: 50%; transition: color 150ms ease, background 150ms ease;}
.yl-app .filter-bar--task .search-field-clear:hover, .yl-app .filter-bar--task .filter-range-clear:hover, .yl-app .filter-bar--task .filter-field .filter-field-clear:hover, .yl-app .filter-dropdown .fd-clear:hover {color: var(--color-text-1, #0c0d0e); background: var(--grey-3, #eceded);}
.yl-app .filter-bar--task .filter-field {display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 0;}
.yl-app .filter-bar--task .filter-row--main > .filter-field {flex: 1 1 160px; max-width: 260px;}
.yl-app .filter-bar--task .search-field--referrer {flex: 0 1 180px; min-width: 140px; max-width: 220px;}
.yl-app .filter-bar--task .filter-row--main > .filter-field:has(.filter-dropdown) {flex: 2 1 200px; min-width: 200px;}
.yl-app .filter-bar--task .filter-row--main > .filter-field:has(input[type="date"]):not(:has(.filter-range)) {flex: 0 0 220px; max-width: 220px;}
.yl-app .filter-bar--task .filter-field:has(input[type="date"]) .filter-input {flex: 1 1 auto; min-width: 0; cursor: pointer; appearance: auto; -webkit-appearance: auto;}
.yl-app .filter-bar--task .filter-input[type="date"]::-webkit-calendar-picker-indicator {cursor: pointer; opacity: 1; flex-shrink: 0; width: 16px; height: 16px; margin-left: 2px;}
.yl-app .filter-bar--task .filter-field-label {font-size: 13px; color: var(--color-text-3, #737a87); white-space: nowrap; user-select: none;}
.yl-app .filter-bar--task .filter-select {height: 34px; min-width: 120px; padding: 0 28px 0 10px; border: 1px solid var(--color-border-2, #dde2e9); border-radius: var(--radius-sm, 4px); background: #fff; font-size: 13px; color: var(--color-text-1, #0c0d0e); outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23737A87' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: border-color 150ms ease, box-shadow 150ms ease;}
.yl-app .filter-bar--task .filter-field .filter-input {height: 34px; min-width: 120px; padding: 0 10px; border: 1px solid var(--color-border-2, #dde2e9); border-radius: var(--radius-sm, 4px); background: #fff; font-size: 13px; color: var(--color-text-1, #0c0d0e); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;}
.yl-app .filter-bar--task .filter-range {display: flex; align-items: center; gap: 6px; flex-shrink: 0;}
.yl-app .filter-bar--task .filter-range .filter-input {height: 34px; width: 130px; padding: 0 8px; border: 1px solid var(--color-border-2, #dde2e9); border-radius: var(--radius-sm, 4px); background: #fff; font-size: 13px; color: var(--color-text-1, #0c0d0e); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;}
.yl-app .filter-bar--task .filter-range-sep {color: var(--color-text-3, #737a87); font-size: 13px; user-select: none;}
.yl-app .filter-bar--task .filter-range-clear {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-3, #737a87); cursor: pointer; border-radius: 50%; flex-shrink: 0; transition: color 150ms ease, background 150ms ease;}
.yl-app .filter-bar--task .filter-field:has(.filter-range) {flex: 0 0 auto; max-width: none; overflow: visible;}
.yl-app .filter-bar--task .filter-field .filter-field-clear {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: var(--color-text-3, #737a87); border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: color 150ms ease, background 150ms ease;}
.yl-app .filter-bar--task .quick-date-btns {display: flex; gap: 6px; flex-shrink: 0;}
.yl-app .filter-bar--task .filter-status, .yl-app .filter-bar--task .filter-actions {display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
.yl-app .filter-bar--task .filter-status-btns {display: inline-flex; gap: 0;}
@media (max-width: 900px) {
.yl-app .filter-bar--task .filter-row--main {gap: 8px;}
.yl-app .filter-bar--task .filter-row--main > .search-field {flex: 1 1 200px;}
.yl-app .filter-bar--task .filter-row--main > .search-field.search-field--referrer {flex: 1 1 140px; min-width: 120px; max-width: 220px;}
.yl-app .filter-bar--task .filter-range .filter-input {width: 110px;}
.yl-app .filter-bar--task .filter-select {min-width: 100px;}
}
@media (max-width: 640px) {
.yl-app .filter-bar--task .filter-row--sub {flex-direction: column; align-items: stretch; gap: 8px;}
.yl-app .filter-bar--task .filter-actions {justify-content: flex-end;}
}
.vc-modal-mask.popconfirm-mode {background: transparent; display: block; pointer-events: none;}
.yl-app .vc-btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: var(--font-weight-regular); line-height: var(--line-height-h4); border-radius: var(--radius-sm); border: none; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; height: 32px; padding: 0 16px; font-size: var(--font-size-lead);}
.yl-app .image-upload-area, .staff-form-page .image-upload-area {display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.yl-app .page-header-tabs-spacer {flex-shrink: 0; box-shadow: inset 0px -1px 0px 0px var(--color-border-2); background: var(--color-white); width: 32px; height: 36px;}
.yl-app .page-header-tabs-gap {flex-shrink: 0; box-shadow: inset 0px -1px 0px 0px var(--color-border-2); background: var(--color-white); width: 6px; height: 36px;}
.yl-app .page-header-tabs-end {flex: 1; box-shadow: inset 0px -1px 0px 0px var(--color-border-2); background: var(--color-white); height: 36px;}
.yl-app .filter-status-btns .status-filter-btn:first-child, .yl-app .filter-status-btns .operation-status-btn:first-child {border-top-left-radius: var(--radius-sm, 4px); border-bottom-left-radius: var(--radius-sm, 4px);}
.yl-app .filter-status-btns .status-filter-btn:last-child, .yl-app .filter-status-btns .operation-status-btn:last-child, .yl-app .filter-status-btns .balance-filter-btn:last-child {border-top-right-radius: var(--radius-sm, 4px); border-bottom-right-radius: var(--radius-sm, 4px);}
.yl-app .page-header-tabs-spacer {flex-shrink: 0; box-shadow: none; background: var(--bg-white); width: 32px; height: 36px;}
.yl-app .page-header-tabs-gap {flex-shrink: 0; box-shadow: none; background: var(--bg-white); width: 6px; height: 36px;}
.yl-app .page-header-tabs-end {flex: 1; box-shadow: none; background: var(--bg-white); height: 36px;}
.yl-app .filter-field {display: flex; align-items: center; height: 32px; border-radius: 4px; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2), 0 1px 1px rgba(0,0,0,0.05); overflow: hidden;}
.yl-app .filter-field:has(.select-labeled), .yl-app .filter-field:has(.input-labeled), .yl-app .filter-field:has(.filter-dropdown) {box-shadow: none; background: transparent; overflow: visible;}
.yl-app .filter-field:has(.filter-dropdown) {height: auto; align-items: center;}
.yl-app .filter-field-label {font-size: 13px; color: var(--text-3); line-height: 32px; white-space: nowrap; padding-left: 12px; flex-shrink: 0; user-select: none;}
.yl-app .filter-field .filter-select, .yl-app .filter-field .filter-input, .yl-app .filter-field .filter-date {box-shadow: none; border-radius: 0; padding-left: 6px;}
.yl-app .filter-select {height: 32px; padding: 0 12px; border: none; border-radius: 4px; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2), 0 1px 1px rgba(0,0,0,0.05); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; cursor: pointer; appearance: none; min-width: 80px;}
.yl-app .filter-input {height: 32px; padding: 0 12px; border: none; border-radius: 4px; background: var(--bg-white); box-shadow: 0 0 0 1px var(--border-2), 0 1px 1px rgba(0,0,0,0.05); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; width: 120px;}
.yl-app .pagination .page-link {position:relative; display:flex; align-items:center; justify-content:center; width:28px;height:28px; padding:0; color:var(--color-text-1); background:var(--color-white); border:1px solid var(--color-border-3); border-radius:var(--radius-sm); text-decoration:none; cursor:pointer; transition:border-color 150ms ease,background 150ms ease,color 150ms ease; box-sizing:border-box;}
.yl-app .filter-status-btns .status-filter-btn:first-child, .yl-app .filter-status-btns .balance-filter-btn:first-child {margin-left: 0; border-top-left-radius: var(--radius-sm, 4px); border-bottom-left-radius: var(--radius-sm, 4px);}
.yl-app .filter-status-btns .status-filter-btn:hover, .yl-app .filter-status-btns .balance-filter-btn:hover {background: var(--color-bg-5, #f1f3f5); color: var(--color-text-1, #0c0d0e); z-index: 1; position: relative;}
.yl-app .filter-status-btns .status-filter-btn.active, .yl-app .filter-status-btns .balance-filter-btn.active {background: var(--color-primary, #1664ff); border-color: var(--color-primary, #1664ff); color: #ffffff; z-index: 2; position: relative;}
.yl-app .menu-tree ul::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: var(--color-border, #dde2e9); pointer-events: none;}
.yl-app .menu-item::before {content: ''; position: absolute; left: -1.5rem; top: 50%; width: 1rem; height: 1px; background-color: var(--color-border, #dde2e9); pointer-events: none;}
.yl-app .menu-drag-handle {cursor: move; color: var(--color-text-2, #42464e); padding: 0.25rem; opacity: 0.6; transition: opacity 0.2s; flex-shrink: 0; z-index: 10; position: relative; pointer-events: auto;}
.yl-app .list-card:hover {background: var(--color-bg-hover, #f8f9fc);}
@media (max-width: 768px) {
.yl-app .teacher-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; background: transparent !important;}
.yl-app .empty-teachers {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .empty-teachers i {font-size: 3rem;}
.yl-app .empty-teachers h5 {font-size: 1rem;}
.yl-app .teachers-container {display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0.25rem; box-sizing: border-box; background: transparent;}
.yl-app .teacher-header, .yl-app .teacher-row::after {display: none;}
.yl-app .teacher-row {border: 1px solid var(--color-border, #dde2e9); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; background: white;}
.yl-app .teacher-row-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; min-height: auto; grid-template-columns: none !important; background: transparent;}
.yl-app .teacher-col {flex: none; width: auto; padding: 0.5rem 0.25rem; background: transparent;}
.yl-app .teacher-col-serial {order: 1; width: 15%; display: flex; color: var(--color-text-2, #42464e); font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-name {order: 2; width: 85%; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-title {order: 3; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-title::before {content: '职称：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-qualification {order: 4; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-qualification::before {content: '资质：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-experience {order: 5; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-experience::before {content: '飞行经验：'; color: var(--color-text-2, #42464e); font-weight: normal;}
.yl-app .teacher-col-experience::after {content: '年'; color: var(--color-text-2, #42464e); font-weight: normal;}
.yl-app .teacher-col-direction {order: 6; width: 100%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-direction::before {content: '教学方向：'; color: var(--color-text-2, #42464e);}
.yl-app .teacher-col-badges {order: 7; width: 100%; padding: 0.5rem 0.25rem; border-bottom: 1px solid #eee;}
.yl-app .teacher-col-actions {order: 8; width: 100%; min-width: auto; padding-top: 0.5rem; border-top: 1px solid #eee; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem;}
.yl-app .teacher-col-actions .btn i {margin-right: 0.1rem; font-size: 0.7rem;}
}
@media (max-width: 575.98px) {
.yl-app .teacher-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; background: transparent !important;}
.yl-app .empty-teachers {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .teachers-container {padding: 0.5rem 0.25rem; background: transparent;}
.yl-app .teacher-row {border-radius: 6px;}
.yl-app .teacher-row-main {padding: 0.5rem;}
}
.yl-app .item-card-main {display: grid; grid-template-columns: 40px 50px minmax(140px, 1.2fr) minmax(100px, 0.9fr) minmax(150px, 1.3fr) minmax(100px, 0.9fr) minmax(100px, 0.9fr) 60px minmax(100px, 0.9fr) minmax(120px, 1.1fr) minmax(90px, 0.8fr) minmax(140px, 1.2fr) minmax(180px, 1.5fr); align-items: center; padding: 0.625rem 0.75rem; gap: 0.5rem; font-size: 0.9375rem; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box;}
@media (max-width: 768px) {
.yl-app .mobile-col-align-all {padding-left: 0 !important; padding-right: 0 !important;}
.yl-app .status-filter-wrapper {gap: 0.375rem !important;}
.yl-app .batch-actions-wrapper {padding: 0.75rem !important;}
.yl-app .batch-actions-wrapper > div {flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important;}
.yl-app .batch-actions {justify-content: center !important; flex-wrap: wrap !important;}
.yl-app .batch-info {width: 100% !important; text-align: center !important; margin-bottom: 0.5rem !important;}
.yl-app .services-list-wrapper, .yl-app .service-item-list-wrapper {padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .services-container, .yl-app .items-container {display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0.25rem; box-sizing: border-box;}
.yl-app .service-card, .yl-app .item-card {border: 1px solid var(--color-border, #dde2e9); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); width: 100%; max-width: 100%; margin: 0; box-sizing: border-box;}
.yl-app .service-card::after, .yl-app .service-header, .yl-app .item-card::after, .yl-app .item-header {display: none;}
.yl-app .empty-services, .yl-app .empty-items {padding: 2rem 1rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box;}
.yl-app .empty-services i, .yl-app .empty-items i {font-size: 3rem;}
.yl-app .empty-services h5, .yl-app .empty-items h5 {font-size: 1rem;}
.yl-app .service-card-main {display: grid !important; grid-template-columns: 1fr 1fr; padding: 0.5rem; gap: 0.25rem; min-height: auto; width: 100%; box-sizing: border-box;}
.yl-app .service-col-serial {order: 1;}
.yl-app .service-col-type {order: 4;}
.yl-app .service-col-date {order: 6;}
.yl-app .service-col::before {content: attr(data-label); color: var(--color-text-2, #42464e); white-space: nowrap; flex-shrink: 0; margin-right: 0.25rem; min-width: 3em; text-align: left; font-weight: 500; font-size: 0.875rem;}
.yl-app .service-col-serial::before {content: '序号:';}
.yl-app .service-col-no::before {content: '服务编号:';}
.yl-app .service-col-no i {margin-right: 0.25rem; color: var(--color-primary, #1664ff); flex-shrink: 0;}
.yl-app .service-col-no {align-items: flex-start; display: flex; flex-direction: column; gap: 0.25rem; grid-column: 1 / -1; order: 2; overflow: visible; white-space: normal;}
.yl-app .service-col-client {align-items: flex-start; display: flex; flex-direction: column; gap: 0.25rem; grid-column: 1 / -1; order: 3; overflow: visible; white-space: normal;}
.yl-app .service-col-client::before {content: '客户信息:';}
.yl-app .service-col-client .client-info {width: 100%;}
.yl-app .service-col-type::before {content: '服务类型:';}
.yl-app .service-col-status {justify-content: flex-start; order: 5;}
.yl-app .service-col-status::before {content: '状态:';}
.yl-app .service-col-status .service-status {display: inline-block;}
.yl-app .service-col-date::before {content: '创建日期:';}
.yl-app .service-col-actions {border-top: 1px solid var(--color-border, #dde2e9); grid-column: 1 / -1; justify-content: flex-start; margin-top: 0.5rem; order: 7; padding-top: 0.5rem;}
.yl-app .service-col-actions::before {content: '操作:';}
.yl-app .item-card-main {display: flex !important; flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; min-height: auto; grid-template-columns: none !important;}
.yl-app .item-col {flex: none; width: auto; padding: 0.5rem 0.25rem;}
.yl-app .item-col-checkbox {order: 1; width: 10%;}
.yl-app .item-col-serial {order: 2; display: flex; color: var(--color-text-2, #42464e); font-size: 0.875rem; font-weight: 600; width: 10%; border-bottom: 1px solid #eee;}
.yl-app .item-col-part-number {order: 3; width: 80%; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid #eee; color: var(--color-primary-5, #4080ff);}
.yl-app .item-col-part-number i {margin-right: 0.5rem;}
.yl-app .item-col-simple-part-number {order: 4; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-simple-part-number::before {content: '简易料号：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-product-name {order: 5; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-product-name::before {content: '产品名称：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-applicable-model {order: 6; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-applicable-model::before {content: '适用机型：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-product-series {order: 7; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-product-series::before {content: '产品系列：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-unit {order: 8; width: 25%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-unit::before {content: '单位：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-material-attribute {order: 9; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-material-attribute::before {content: '物料属性：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-material-usage {order: 10; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-material-usage::before {content: '物料用途：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-local-repair-price {order: 11; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-local-repair-price::before {content: '本地维修价：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-created-at {order: 12; width: 50%; font-size: 0.875rem; border-bottom: 1px solid #eee;}
.yl-app .item-col-created-at::before {content: '创建时间：'; color: var(--color-text-2, #42464e);}
.yl-app .item-col-actions {order: 13; width: 100%; padding-top: 0.5rem; justify-content: flex-start;}
.yl-app .service-card-main {grid-template-columns: 1fr;}
.yl-app .service-col {align-items: flex-start; box-sizing: border-box; display: flex; font-size: 0.875rem; justify-content: flex-start; min-height: 1.5em; min-width: 0; overflow: hidden; padding: 0.25rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
}
@media (max-width: 1400px) {
.yl-app .contract-row {grid-template-columns: minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%);}
}
@media (max-width: 992px) {
.yl-app .contract-row {font-size: 0.875rem; grid-template-columns: minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%);}
}
@media (max-width: 768px) {
.yl-app .contract-row {font-size: 0.8125rem; padding: 0.5rem 0.625rem; grid-template-columns: minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%);}
.yl-app .contract-col-actions .action-btns .btn i {font-size: 0.875rem !important;}
.yl-app .contract-col-actions .action-btns .btn span {font-size: 0.65rem !important;}
}
@media (max-width: 576px) {
.yl-app .contract-row {font-size: 0.75rem; padding: 0.4rem 0.5rem; grid-template-columns: minmax(25px, 2%) minmax(30px, 4%) minmax(80px, 12%) minmax(50px, 8%) minmax(80px, 13%) minmax(60px, 10%) minmax(50px, 7%) minmax(30px, 4%) minmax(45px, 6%) minmax(45px, 6%) minmax(50px, 6%) minmax(70px, 9%) minmax(120px, 13%);}
.yl-app .contract-col-actions .action-btns .btn i {font-size: 0.75rem !important;}
.yl-app .contract-col-actions .action-btns .btn span {display: none;}
}
@media (max-width: 575.98px) {
.yl-app .service-card-main {grid-template-columns: 1fr;}
}
.yl-app .stats-summary {white-space: nowrap; line-height: 1.5; font-size: 13px;}
.yl-app .records-wrapper .list-card:hover {background: #f8f9fa !important;}
.yl-app .filter-status-btns .status-filter-btn.active {background: var(--color-primary, #1664ff); border-color: var(--color-primary, #1664ff); color: #fff; z-index: 2; position: relative;}
.yl-app .filter-status-btns {display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 !important;}
.yl-app .filter-status-btns > :first-child {margin-left: 0 !important; border-top-left-radius: var(--radius-sm, 4px) !important; border-bottom-left-radius: var(--radius-sm, 4px) !important;}
.yl-app .filter-status-btns > :last-child {border-top-right-radius: var(--radius-sm, 4px) !important; border-bottom-right-radius: var(--radius-sm, 4px) !important;}
.yl-app .filter-status-btns .status-filter-btn[data-status="approved"], .yl-app .filter-status-btns .status-filter-btn[data-status="published"], .yl-app .filter-status-btns .status-filter-btn[data-status="settled"], .yl-app .filter-status-btns .status-filter-btn[data-status="delivered"], .yl-app .filter-status-btns .status-filter-btn[data-status="has_invoice"], .yl-app .filter-status-btns .status-filter-btn[data-status="has_nameplate"], .yl-app .filter-status-btns .status-filter-btn.status-approved, .yl-app .filter-status-btns .status-filter-btn.status-published, .yl-app .filter-status-btns .balance-filter-btn.status-surplus, .yl-app .filter-status-btns .payment-status-settled, .yl-app .filter-status-btns .delivery-status-delivered, .yl-app .filter-status-btns .invoice-status-has_invoice, .yl-app .filter-status-btns .nameplate-status-has_nameplate, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="settled"], .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="delivered"], .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="has_invoice"], .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="has_nameplate"] {color: var(--color-success, #2a814b);}
.yl-app .filter-status-btns .status-filter-btn[data-status="pending"], .yl-app .filter-status-btns .status-filter-btn[data-status="unsettled"], .yl-app .filter-status-btns .status-filter-btn[data-status="partially_delivered"], .yl-app .filter-status-btns .status-filter-btn.status-pending, .yl-app .filter-status-btns .payment-status-unsettled, .yl-app .filter-status-btns .delivery-status-partially_delivered, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="unsettled"], .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="partially_delivered"] {color: #8a5d00;}
.yl-app .filter-status-btns .status-filter-btn[data-status="rejected"], .yl-app .filter-status-btns .status-filter-btn[data-status="cancelled"], .yl-app .filter-status-btns .status-filter-btn[data-status="refunded"], .yl-app .filter-status-btns .status-filter-btn.status-rejected, .yl-app .filter-status-btns .status-filter-btn.status-refunded, .yl-app .filter-status-btns .status-filter-btn.status-cancelled {color: var(--color-danger, #d7312a);}
.yl-app .filter-status-btns .status-filter-btn[data-status="approved"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="published"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="settled"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="delivered"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="has_invoice"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="has_nameplate"]:hover, .yl-app .filter-status-btns .status-filter-btn.status-approved:hover, .yl-app .filter-status-btns .status-filter-btn.status-published:hover, .yl-app .filter-status-btns .payment-status-settled:hover, .yl-app .filter-status-btns .delivery-status-delivered:hover, .yl-app .filter-status-btns .invoice-status-has_invoice:hover, .yl-app .filter-status-btns .nameplate-status-has_nameplate:hover, .yl-app .filter-status-btns .balance-filter-btn.status-surplus:hover, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="settled"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="delivered"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="has_invoice"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="has_nameplate"]:hover {background: rgba(42,129,75,0.10);}
.yl-app .filter-status-btns .status-filter-btn[data-status="pending"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="unsettled"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="partially_delivered"]:hover, .yl-app .filter-status-btns .status-filter-btn.status-pending:hover, .yl-app .filter-status-btns .payment-status-unsettled:hover, .yl-app .filter-status-btns .delivery-status-partially_delivered:hover, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="unsettled"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="partially_delivered"]:hover {background: rgba(189,126,0,0.12);}
.yl-app .filter-status-btns .status-filter-btn[data-status="rejected"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="cancelled"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="refunded"]:hover, .yl-app .filter-status-btns .status-filter-btn.status-rejected:hover, .yl-app .filter-status-btns .status-filter-btn.status-refunded:hover, .yl-app .filter-status-btns .status-filter-btn.status-cancelled:hover {background: rgba(215,49,42,0.10);}
.yl-app .filter-status-btns .status-filter-btn[data-status="processing"]:hover, .yl-app .filter-status-btns .status-filter-btn[data-status="completed"]:hover, .yl-app .filter-status-btns .status-filter-btn.status-completed:hover, .yl-app .filter-status-btns .status-filter-btn.status-active:hover, .yl-app .filter-status-btns .status-filter-btn.status-processing:hover, .yl-app .filter-status-btns .balance-filter-btn.status-settled:hover {background: rgba(22,100,255,0.08);}
.yl-app .filter-status-btns .status-filter-btn[data-status="approved"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="published"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="settled"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="delivered"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="has_invoice"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="has_nameplate"].active, .yl-app .filter-status-btns .status-filter-btn.status-approved.active, .yl-app .filter-status-btns .status-filter-btn.status-published.active, .yl-app .filter-status-btns .payment-status-settled.active, .yl-app .filter-status-btns .delivery-status-delivered.active, .yl-app .filter-status-btns .invoice-status-has_invoice.active, .yl-app .filter-status-btns .nameplate-status-has_nameplate.active, .yl-app .filter-status-btns .balance-filter-btn.status-surplus.active, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="settled"].active, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="delivered"].active, .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="has_invoice"].active, .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="has_nameplate"].active {background: var(--color-success, #2a814b); border-color: var(--color-success, #2a814b); color: #fff;}
.yl-app .filter-status-btns .status-filter-btn[data-status="pending"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="unsettled"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="partially_delivered"].active, .yl-app .filter-status-btns .status-filter-btn.status-pending.active, .yl-app .filter-status-btns .payment-status-unsettled.active, .yl-app .filter-status-btns .delivery-status-partially_delivered.active, .yl-app .filter-status-btns .status-filter-btn[data-payment-status="unsettled"].active, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="partially_delivered"].active {background: #a06a00; border-color: #a06a00; color: #fff;}
.yl-app .filter-status-btns .status-filter-btn[data-status="rejected"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="cancelled"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="refunded"].active, .yl-app .filter-status-btns .status-filter-btn.status-rejected.active, .yl-app .filter-status-btns .status-filter-btn.status-refunded.active, .yl-app .filter-status-btns .status-filter-btn.status-cancelled.active {background: var(--color-danger, #d7312a); border-color: var(--color-danger, #d7312a); color: #fff;}
.yl-app .filter-status-btns .status-filter-btn[data-status="draft"].active, .yl-app .filter-status-btns .status-filter-btn[data-status="inactive"].active, .yl-app .filter-status-btns .status-filter-btn.status-draft.active, .yl-app .filter-status-btns .status-filter-btn.status-inactive.active, .yl-app .filter-status-btns .status-filter-btn[data-delivery-status="not_delivered"].active, .yl-app .filter-status-btns .status-filter-btn[data-invoice-status="no_invoice"].active, .yl-app .filter-status-btns .status-filter-btn[data-nameplate-status="no_nameplate"].active {background: var(--color-text-3, #737a87); border-color: var(--color-text-3, #737a87); color: #fff;}
.yl-app .filter-bar--task .filter-dropdown {min-width: 160px; flex: 1 1 170px;}
.yl-app .filter-bar--task .filter-row--main > .filter-field > .filter-dropdown {min-width: 0; flex: 1 1 0; width: 100%;}
.yl-app .filter-dropdown {position: relative; display: block; width: 100%; min-width: 140px; box-sizing: border-box; font-family: inherit;}
.yl-app .filter-dropdown .fd-trigger {display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; height: 34px !important; padding: 0 !important; margin: 0 !important; background: #fff !important; border: 1px solid var(--color-border-2, #dde2e9) !important; border-radius: var(--radius-sm, 4px) !important; box-shadow: none !important; cursor: text; transition: border-color 150ms ease, box-shadow 150ms ease !important; outline: none !important;}
.yl-app .filter-dropdown .fd-trigger:hover {border-color: var(--color-text-3, #737a87) !important;}
.yl-app .filter-dropdown.open .fd-trigger, .yl-app .filter-dropdown .fd-trigger:focus-within {border-color: var(--primary-6, #1664ff) !important; box-shadow: 0 0 0 3px rgba(22,100,255,.15) !important;}
.yl-app .filter-dropdown.open .fd-trigger {border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.yl-app .filter-dropdown .fd-icon {flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-text-3, #737a87); pointer-events: none; transition: color 150ms ease;}
.yl-app .filter-dropdown.open .fd-icon, .yl-app .filter-dropdown.has-value .fd-icon {color: var(--primary-6, #1664ff);}
.yl-app .filter-dropdown .fd-input {flex: 1; min-width: 0; height: 100%; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; padding: 0 4px !important; margin: 0 !important; font-size: 13px !important; color: var(--color-text-1, #0c0d0e) !important; font-family: inherit; line-height: 1.4;}
.yl-app .filter-dropdown .fd-input::-webkit-search-cancel-button {appearance: none;}
.yl-app .filter-dropdown .fd-clear {flex-shrink: 0; display: none; width: 20px; height: 20px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--color-text-3, #737a87); cursor: pointer; border-radius: 50%; padding: 0; margin: 0 2px 0 0; font-size: 12px;}
.yl-app .filter-dropdown .fd-arrow-btn {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 100%; border: none; background: transparent; cursor: pointer; padding: 0; margin: 0; color: var(--color-text-3, #737a87); transition: transform 150ms ease, color 150ms ease;}
.yl-app .filter-dropdown .fd-arrow {font-size: 11px; transition: inherit;}
.yl-app .filter-dropdown.disabled {opacity: .6; pointer-events: none;}
.yl-app .filter-dropdown .fd-panel {position: absolute; top: calc(100% - 1px); left: 0; z-index: 1050; width: 100%; min-width: 100%; max-height: 264px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--primary-6, #1664ff); border-top: none; border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px); box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(22,100,255,.08); padding: 4px 0; display: none;}
.yl-app .filter-dropdown.open .fd-panel {display: block; animation: fd-in 120ms ease-out;}
.yl-app .filter-dropdown .fd-option {display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--color-text-1, #0c0d0e); cursor: pointer; white-space: nowrap; transition: background 100ms ease;}
.yl-app .filter-dropdown .fd-option:hover, .yl-app .filter-dropdown .fd-option.fd-highlight {background: var(--color-bg-5, #f5f6f8);}
.yl-app .filter-dropdown .fd-option.selected {color: var(--primary-6, #1664ff); background: var(--color-primary-container, #f3f7ff); font-weight: 500;}
.yl-app .filter-dropdown .fd-option.disabled {color: var(--color-text-3, #737a87); cursor: not-allowed; opacity: .6;}
.yl-app .filter-dropdown .fd-option .fd-sub {margin-left: auto; font-size: 11px; color: var(--color-text-3, #737a87);}
.yl-app .filter-dropdown .fd-option .fd-phone {margin-left: 6px; font-size: 12px; color: var(--color-text-3, #737a87); font-family: var(--font-family-secondary, monospace);}
.yl-app .filter-dropdown .fd-option .fd-check {margin-left: auto; font-size: 13px;}
.yl-app .filter-dropdown .fd-empty {padding: 14px; text-align: center; color: var(--color-text-3, #737a87); font-size: 13px;}
@keyframes fd-in {
from {opacity: 0; transform: translateY(-4px);}
to {opacity: 1; transform: translateY(0);}
}
.yl-app .data-table.pbx-list-table .pbx-num {text-align: right; font-variant-numeric: tabular-nums;}
.yl-app .data-table.pbx-list-table .pbx-cur {margin-right: 1px;}
.yl-app .data-table.pbx-list-table .pbx-used-col, .yl-app .data-table.pbx-list-table .pbx-due-col {width: 92px; text-align: right;}
.yl-app .data-table.pbx-list-table .pbx-due-col .pbx-paid {color: #06a561; font-weight: 600;}
.yl-app .pbx-list-ledger {min-width: 1120px;}
.yl-app .pbx-fold-btn {display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 0; border-radius: var(--radius-md, 6px); background: var(--color-bg-3, #fafbfc); color: var(--color-text-3, #737a87); font-size: 12px; cursor: pointer; white-space: nowrap;}
.yl-app .pbx-fold-btn:hover {background: var(--color-surface-container-low, #fcfdfe); color: var(--color-primary, #1664ff);}
.yl-app .pbx-fold-btn i, .yl-app .pbx-person-meta i {font-size: 12px;}
.yl-app .data-table.pbx-list-table .pbx-goes-col {text-align: left;}
.yl-app .data-table.pbx-list-table .pbx-goes {line-height: 1.65; min-width: 220px; max-width: 340px; vertical-align: top; white-space: normal;}
.yl-app .pbx-goes-item {display: inline-block; margin: 0 10px 3px 0; white-space: nowrap;}
.yl-app .pbx-head {display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 16px;}
.yl-app .pbx-summary {flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 0;}
.yl-app .pbx-sum-item {background: var(--color-bg-3, #fafbfc); padding: 12px 16px; border-radius: var(--radius-md, 10px);}
.yl-app .pbx-sum-label {font-size: 12px; color: var(--color-text-3, #737a87); display: flex; align-items: center; gap: 5px;}
.yl-app .pbx-sum-num {margin-top: 5px; font-size: 20px; font-weight: 700; color: var(--color-text-1, #0c0d0e); font-variant-numeric: tabular-nums; letter-spacing: -.3px;}
.yl-app .pbx-sum-num .pbx-cur {font-size: 13px; font-weight: 600; color: var(--color-text-3, #737a87); margin-right: 1px;}
.yl-app .pbx-person {flex: 0 0 240px; display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: 14px 16px; background: var(--color-bg-3, #fafbfc); border-radius: var(--radius-md, 10px);}
.yl-app .pbx-person-avatar {display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary, #1664ff); color: #fff; font-size: 16px; font-weight: 600;}
.yl-app .pbx-person-main {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.yl-app .pbx-person-name {font-size: 17px; font-weight: 700; color: var(--color-text-1, #0c0d0e); line-height: 1.2;}
.yl-app .pbx-person-meta {display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-text-3, #737a87);}
.yl-app .pbx-person-meta span {display: inline-flex; align-items: center; gap: 4px;}
.yl-app .pbx-empty-cell {text-align: center; color: var(--color-text-3, #737a87); padding: 18px 8px;}
@media (max-width: 768px) {
.yl-app .pbx-head {flex-direction: column;}
.yl-app .pbx-person {flex: 1 1 auto;}
.yl-app .pbx-summary {grid-template-columns: repeat(2, 1fr);}
}
.yl-app .pbx-amt-in {color: #18a058; font-weight: 600; font-variant-numeric: tabular-nums;}
.yl-app .pbx-amt-out {color: #e5435a; font-weight: 600; font-variant-numeric: tabular-nums;}
.yl-app .pbx-amt-carry {color: var(--color-text-3, #737a87); font-weight: 500; font-variant-numeric: tabular-nums;}
.yl-app .pbx-amt-in .pbx-cur, .yl-app .pbx-amt-out .pbx-cur, .yl-app .pbx-amt-carry .pbx-cur, .yl-app .pbx-cum-balance .pbx-cur {font-size: 12px; font-weight: 600; margin-right: 1px;}
.yl-app .pbx-cum-balance {font-weight: 600; color: #1664ff; font-variant-numeric: tabular-nums;}
.yl-app .pbx-row-paid {background: rgba(6,165,97,.06);}
.yl-app .pbx-row-paid:hover {background: rgba(6,165,97,.10);}
.yl-app .pbx-pay-note {margin-top: 4px; font-size: 12px; color: #e5435a; font-weight: 500; line-height: 1.4;}
.yl-app .pbx-pay-surplus {color: #18a058;}
.yl-app .pbx-toolbar {display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.yl-app .pbx-toolbar .pbx-search {flex: 1; margin-bottom: 0;}
.yl-app .pbx-dir-btn {height: 36px; padding: 0 14px; border: 1px solid var(--color-border-1, #eceef1); border-radius: var(--radius-md, 6px); background: #fff; color: var(--color-text-3, #737a87); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;}
.yl-app .pbx-dir-btn:hover {border-color: var(--color-primary, #1664ff); color: var(--color-primary, #1664ff);}
.yl-app .pbx-type {display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;}
.yl-app .pbx-type-advance {background: rgba(22,100,255,.10); color: #1664ff;}
.yl-app .pbx-type-carry {background: rgba(115,122,135,.12); color: #737a87;}
.yl-app .pbx-type-claim {background: rgba(255,125,0,.12); color: #d9720a;}
.yl-app .pbx-sub-date {font-size: 11px; color: var(--color-text-3, #737a87); margin-top: 2px; font-weight: 400; line-height: 1.3;}
.yl-app .pbx-search {display: flex; gap: 8px; margin-bottom: 12px;}
.yl-app .pbx-search input:focus {outline: none; border-color: var(--color-primary, #1664ff);}
.yl-app .pbx-search button {height: 36px; padding: 0 18px; border: 0; border-radius: var(--radius-md, 6px); background: var(--color-primary, #1664ff); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;}
.yl-app .pbx-sum-warn .pbx-sum-num {color: #e5435a;}
.yl-app .pbx-sum-paid .pbx-sum-num, .yl-app .pbx-sum-paid .pbx-sum-label i.bi-info-circle {color: #06a561;}
/* 明细页资金流水：报账编号可点（跳报账详情页 financial_detail.php?id=claim_id） */
.yl-app .pbx-no-link {color: var(--color-primary, #1664ff); text-decoration: none; font-weight: 600;}
.yl-app .pbx-no-link:hover {text-decoration: underline;}

/* 公共分页组件下拉箭头兜底：pagination.js 把 pagesize-arrow 放在 select 后而非内部，原有样式仅对 .pagesize-select .pagesize-arrow 生效 */
.yl-app .pagesize-arrow {width: 12px; height: 12px; color: var(--color-text-3); flex-shrink: 0; pointer-events: none;}
/* 隐藏原生 select 默认下拉箭头，避免与 pagesize-arrow 同时出现 */
.yl-app .pagesize-select {-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}

/* ===== 源头修复：独立页级 .page-header-tabs 的负边距（-32/-27/-16px 本为抵消
   .page-header-comp 内 32px padding 做贴边）被放到 .container-fluid（仅 15px padding）
   中时，会把 Tab 栏撑出内容区边界，触发整页横向滚动条（billing_preset / task_types /
   contract_center / 多个模块共现）。
   选择器用 #main-content 而非 .yl-app：#main-content 是每个页面都有的内容容器
   （page_head.php 恒输出），而 .yl-app 仅作用于域内模块；用 #main-content 可一次性
   覆盖全部模块（含 lottery 等未纳入 .yl-app 作用域的模块），无需逐页/逐模块打补丁。
   裁掉内容区横向溢出即可根治；overflow:clip 不创建滚动容器、不影响 sticky 表头，
   优于 hidden。老浏览器不支持 clip 时回退 hidden。 ===== */
/* 内容区裁切：防止独立 Tab 负边距、宽表、筛选栏等撑开 #main-content */
#main-content { overflow-x: hidden !important; }
@supports (overflow: clip) { #main-content { overflow-x: clip !important; } }

/* 终极兜底：禁止 html/body 出现横向滚动条；项目内所有横向滚动均走内部容器
   （yl-list-table-wrap 等），body 级别横向滚动均为布局 bug。 */
html, body { overflow-x: hidden !important; }