:root{--sidebar-width: 250px;--sidebar-bg: #2c3e50;--sidebar-color: #ecf0f1;--sidebar-hover: #34495e;--topbar-bg: #ffffff;--content-bg: #f8f9fa}.col-wrapper{--w: 300px;height:calc(100dvh - 108px);overflow-x:auto}.col-wrapper>div{display:flex;gap:20px}.col-item{display:flex;flex-direction:column;gap:15px;padding:7px;border-radius:10px;border:1px solid #e9ecef;background-color:#f8f9fa;width:var(--w);min-width:var(--w);height:fit-content}.col-item button{border:none;outline:none;display:flex;background-color:transparent;color:#6c757d}.col-header{display:flex;align-items:center;justify-content:space-between}.col-header .l{display:flex;align-items:center;gap:5px}.col-header .l>strong{font-size:13px;font-weight:500;background-color:#6c757d;color:#fff;padding:7px 13px 9px;line-height:1;border-radius:10px}.col-header .l>span{background-color:#fff;color:#2c3e50;padding:1px 5px;border:1px solid #e9ecef;border-radius:3px;min-width:25px;display:inline-block;text-align:center}.col-header .r{display:flex;align-items:center;gap:5px}.col-body{display:flex;flex-direction:column;gap:7px}.col-body-item{background-color:#fff;border:1px solid #e9ecef;border-radius:10px;padding:20px}.col-body-item .h{display:flex;align-items:center;gap:10px;justify-content:space-between}.col-body-item .h>strong{font-size:15px;font-weight:600}.col-body-item .h>div{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;display:none}.col-body-item .h>div button{font-size:.85em;cursor:pointer}.message-wrapper{display:flex;flex-direction:column;gap:30px}.message-template{--gap: 10px;--space-width: 40px;display:flex;flex-direction:row-reverse;gap:var(--gap)}.message-template .img-area{width:var(--space-width);min-width:var(--space-width)}.message-template .message-area{max-width:calc(100% - (var(--gap) + var(--space-width)) * 1);width:100%;padding-bottom:3px;font-weight:500;font-size:13px}.message-template .message-area .message{width:100%;padding:20px 25px;background-color:#50a2ff1a;border-radius:10px}.message-template.left .message-area .message{background-color:#0000000d}.message-template .message-area .info{display:flex;justify-content:flex-end;line-height:1;font-size:11px;font-weight:400;margin-top:10px}.message-template.left .message-area .info{justify-content:flex-start}.message-template .img-area{display:flex;align-items:flex-end}.message-template .img-area .img{--size: var(--space-width);font-size:14px;width:var(--size);height:var(--size);min-width:var(--size);border-radius:50%;background-color:#e9ecef;display:flex;align-items:center;justify-content:center;overflow:hidden}.message-template .img-area .img img{width:100%;height:100%;object-fit:cover}.message-template.left{flex-direction:row}.search-section{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:0 2px 6px #0000001a}.search-section .search-box{position:relative;margin-bottom:10px}.search-section .search-box i{position:absolute;left:12px;top:10px;color:#6c757d}.search-section .search-box input{padding-left:35px;border-radius:20px}.search-section .results-info{color:#6c757d;font-size:.9rem}.search-section .results-info .count{font-weight:700;color:#3498db}.table-responsive{font-size:12px;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px #0000001a}.table-responsive table{margin-bottom:0}.table-responsive table thead th{background-color:#f8f9fa;border-top:none;font-weight:600;color:#2c3e50;cursor:pointer;-webkit-user-select:none;user-select:none}.table-responsive table thead th:hover{background-color:#e9ecef}.table-responsive table thead th i{margin-left:5px;font-size:.8rem}.table-responsive table tbody tr{transition:background-color .2s}.table-responsive table tbody tr:hover{background-color:#f8f9fa}.table-responsive table tbody .password-field{margin-right:10px}.table-responsive table tbody .show-password{color:#6c757d;cursor:pointer}.table-responsive table tbody .show-password:hover{color:#3498db}.table-responsive table tbody .action-buttons{display:flex;gap:5px}.table-responsive table tbody .action-buttons .btn{padding:.25rem .5rem}.table-responsive table tbody .no-data{text-align:center;color:#6c757d;padding:30px}.table-responsive table tbody .no-data i{margin-right:8px;color:#f39c12}@media (max-width: 768px){.table-responsive{overflow-x:auto}.table-responsive table{min-width:700px}.member-list-container .header{flex-direction:column;align-items:stretch}.member-list-container .header button{width:100%}}.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .3s ease}.drawer-overlay.active{opacity:1;visibility:visible}.drawer{position:fixed;top:0;right:-500px;width:480px;height:100%;background-color:#fff;z-index:1000;box-shadow:-5px 0 15px #0000001a;transition:right .3s ease;display:flex;flex-direction:column}.drawer.open{right:0}.drawer .drawer-header{padding:20px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center;background-color:#f8f9fa}.drawer .drawer-header h3{margin:0;color:#2c3e50;font-size:1.2rem}.drawer .drawer-header h3 i{margin-right:10px;color:#3498db}.drawer .drawer-header .btn-close{background:none;border:none;font-size:1.2rem;color:#6c757d;cursor:pointer;padding:5px}.drawer .drawer-header .btn-close:hover{color:#2c3e50}.drawer .drawer-content{flex:1;overflow-y:auto;padding:30px}.drawer .drawer-content .message-item{padding:15px;border-radius:8px;background-color:#f8f9fa;margin-bottom:15px;border-left:4px solid #3498db}.drawer .drawer-content .message-item .message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.drawer .drawer-content .message-item .message-header strong{color:#2c3e50;font-size:.95rem}.drawer .drawer-text{height:150px;padding:20px;border-top:1px solid #e9ecef;display:flex;align-items:center;background-color:#f8f9fa;gap:15px}.drawer .drawer-text textarea{padding:10px 15px;resize:none;height:100%;border:1px solid #e9ecef;background-color:#fff;border-radius:3px;width:100%}.drawer .drawer-text button{height:100%;padding:10px 20px;aspect-ratio:1;height:fit-content;border-radius:50%;border:none;background-color:#3498db;color:#fff}@media (max-width: 768px){.drawer{width:100%;right:-100%}.drawer.open{right:0}.drawer-content .message-item{padding:12px}}