.layout{display:flex;min-height:100vh}.layout-sidebar{width:250px;background:#fff;border-right:1px solid #ddd;padding:20px;position:fixed;height:100vh;overflow-y:auto;z-index:100}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sidebar-close{display:none;background:none;border:none;font-size:28px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;border-radius:4px;transition:all .2s}.sidebar-close:hover{background:#f5f5f5;color:#000}.layout-main{flex:1;display:flex;flex-direction:column;margin-left:250px;width:calc(100% - 250px)}.layout-header{background:#fff;border-bottom:1px solid #ddd;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;gap:15px}.header-title{flex:1;margin:0;font-size:1.25rem;font-weight:600;color:var(--text)}.layout-content{flex:1;padding:30px;overflow-y:auto;overflow-x:hidden}@media(max-width:1024px){.layout-sidebar{width:200px}.layout-main{margin-left:200px;width:calc(100% - 200px)}.layout-content{padding:20px}}@media(max-width:768px){.layout-sidebar{transform:translate(-100%);transition:transform .3s}.layout-sidebar.open{transform:translate(0)}.sidebar-close{display:flex;align-items:center;justify-content:center}.layout-main{margin-left:0;width:100%}.layout-header{padding:10px 15px}.layout-content{padding:15px}.header-user{gap:8px}.user-name{font-size:12px}}.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:5px 10px;color:var(--text)}@media(max-width:768px){.menu-toggle{display:block}}.sidebar-overlay{display:none}@media(max-width:768px){.sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:99}}.header-user{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%}.user-name{font-weight:500;color:var(--text);font-size:14px}.btn-logout{padding:8px 16px;border:none;background:linear-gradient(135deg,#ff5151,#ef1000);color:#fff;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}.btn-logout:hover{background:#dc2626;transform:translateY(-1px)}.btn-logout .btn-text-label{display:inline}.sidebar-logo{font-size:1.25rem;font-weight:700;color:var(--primary);margin-bottom:30px}.sidebar-nav{list-style:none}.sidebar-nav li{margin-bottom:10px}.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:10px 15px;color:var(--text-secondary);text-decoration:none;border-radius:6px;transition:all .2s}.sidebar-nav .nav-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}.sidebar-nav .nav-text{flex:1}.sidebar-nav a:hover,.sidebar-nav a.active{background-color:var(--bg);color:var(--primary)}.login-container{display:flex;align-items:center;justify-content:center;height:100vh;background-image:radial-gradient(circle at 20% 20%,rgba(37,99,235,.06) 0%,transparent 8%),radial-gradient(circle at 80% 80%,rgba(37,99,235,.04) 0%,transparent 12%),linear-gradient(180deg,#f7f9fc,#fff);background-color:#f7f9fc}.login-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23g)'/%3E%3Cpath d='M100 260 C200 180 400 180 500 240 C600 300 800 300 900 240 C1000 180 1100 180 1200 260 L1200 400 L0 400 Z' fill='%23f0f4ff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center top;background-size:cover;opacity:.7;pointer-events:none}.login-card{width:360px;background:#fff;border-radius:8px;padding:24px;box-shadow:0 6px 24px #00000014;position:relative;z-index:1}.login-header{text-align:center;margin-bottom:16px}.login-logo{font-size:36px}.login-title{margin:8px 0 4px}.login-subtitle{color:#666;font-size:14px}.form-group{margin-bottom:12px}.form-label{display:block;margin-bottom:6px;color:#333}.form-input{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px}.btn-submit{width:100%;padding:10px;background:#007bff;color:#fff;border:none;border-radius:4px}.form-error{color:#c00;margin-bottom:12px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease;padding:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:slideUp .3s ease;box-shadow:0 10px 40px #0003;position:relative}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:20px 30px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:#fff;z-index:1}.modal-title{font-size:1.25rem;font-weight:600;color:#1a1a1a}.modal-close{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-close:hover{background:#f5f5f5;color:#1a1a1a}.modal-body{padding:30px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.modal-body::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.modal-body::-webkit-scrollbar-thumb:hover{background:#555}.modal-footer{padding:20px 30px;border-top:1px solid #ddd;display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;background:#fff;border-radius:0 0 12px 12px;position:sticky;bottom:0;z-index:10}.confirm-modal{max-width:400px}.confirm-text{color:var(--text-secondary);line-height:1.6}.confirm-warning{background-color:#fef3c7;color:#92400e;padding:12px;border-radius:6px;margin-top:15px;font-size:.875rem}@media(max-width:768px){.modal-overlay{padding:0;align-items:center}.modal{width:90%;height:90vh;max-height:90vh;border-radius:12px;display:flex;flex-direction:column}.modal-header{padding:15px 20px;flex-shrink:0;border-radius:12px 12px 0 0}.modal-title{font-size:1.1rem}.modal-body{padding:20px;overflow-y:auto;flex:1;min-height:0}.modal-footer{padding:15px 20px;flex-direction:column-reverse;gap:8px;flex-shrink:0;border-radius:0 0 12px 12px}.modal-footer .btn{width:100%}}@media(max-width:480px){.modal{width:90%;height:90vh;max-height:90vh;border-radius:8px}.modal-header{padding:12px 16px;border-radius:8px 8px 0 0}.modal-body{padding:16px}.modal-footer{padding:12px 16px;border-radius:0 0 8px 8px}}.datatable-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.datatable-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #eee;gap:16px}.datatable-search{flex:1;max-width:300px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}.datatable-search:focus{outline:none;border-color:#1976d2}.datatable-info{font-size:14px;color:#666}.datatable-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}.datatable-wrapper::-webkit-scrollbar{height:8px}.datatable-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.datatable-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.datatable-wrapper::-webkit-scrollbar-thumb:hover{background:#555}.datatable{width:100%;border-collapse:collapse}.datatable thead{background:#f5f5f5}.datatable th{padding:12px;text-align:left;font-weight:600;color:#333;font-size:14px;border-bottom:2px solid #ddd;white-space:nowrap;vertical-align:middle}.datatable th:first-child,.datatable td:first-child{min-width:150px}.datatable td{padding:12px;border-bottom:1px solid #eee;font-size:14px;vertical-align:middle}.datatable td:last-child{white-space:nowrap;width:1%;padding-right:16px}.datatable tbody tr:hover{background:#f9f9f9}.datatable-empty{text-align:center;color:#999;padding:40px!important}.datatable-footer{display:flex;justify-content:space-between;align-items:center;padding:16px;border-top:1px solid #eee;background:#fafafa;gap:16px}.datatable-pagination-info{font-size:14px;color:#666}.datatable-pagination{display:flex;gap:8px;align-items:center}.datatable-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.datatable-btn:hover:not(:disabled){background:#f5f5f5;border-color:#1976d2}.datatable-btn:disabled{opacity:.5;cursor:not-allowed}.datatable-page-number{padding:6px 12px;font-weight:600;font-size:14px}.datatable-select{padding:6px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;cursor:pointer;background:#fff}.datatable-select:focus{outline:none;border-color:#1976d2}.datatable-loading{text-align:center;padding:40px;color:#666}@media(max-width:768px){.datatable-header{flex-direction:column;align-items:stretch}.datatable-search{max-width:100%}.datatable-footer{flex-direction:column;gap:12px}.datatable th,.datatable td{padding:10px 8px;font-size:13px}.datatable th:first-child,.datatable td:first-child{min-width:120px}.datatable th{white-space:normal}.datatable td:last-child{padding-right:8px}.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}.actions .btn-icon{min-width:36px;min-height:36px;font-size:16px;padding:6px}}@media(max-width:480px){.datatable-wrapper{overflow-x:scroll}.datatable{min-width:600px}.datatable th,.datatable td{padding:8px 6px;font-size:12px}.datatable td{max-width:150px}.actions .btn-icon{min-width:32px;min-height:32px;font-size:14px;padding:4px}}.confirm-modal{padding:20px 0}.confirm-text{font-size:16px;margin-bottom:16px}.confirm-warning{background:#fff3e0;color:#f57c00;padding:12px;border-radius:6px;font-size:14px}.info-card{background:#fff;padding:16px;border-radius:6px}.section-title{margin-bottom:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.form-row{grid-template-columns:1fr}}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap}.page-title{margin:0;font-size:24px;font-weight:600;color:var(--text);flex:1;min-width:200px}.empty-state{text-align:center;padding:64px 24px;color:#666}.empty-state-icon{font-size:64px;margin-bottom:16px}.empty-state-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--text)}.empty-state p{margin:0;color:#666}.badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:500;white-space:nowrap;gap:4px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}.badge-success{background:#e8f5e9;color:#2e7d32}.badge-info{background:#e3f2fd;color:#1565c0}.badge-warning{background:#fff3e0;color:#e65100}.badge-danger{background:#ffebee;color:#c62828}.badge-secondary{background:#f5f5f5;color:#666}.error{background:#ffebee;color:#c62828;padding:12px 16px;border-radius:6px;margin-bottom:16px;border-left:4px solid #c62828}.success{background:#e8f5e9;color:#2e7d32;padding:12px 16px;border-radius:6px;margin-bottom:16px;border-left:4px solid #2e7d32}.loading{text-align:center;padding:48px;color:#666}.btn{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:before{filter:grayscale(1) brightness(10)}.btn-secondary{background:#f5f5f5;color:var(--text)}.btn-secondary:hover:not(:disabled){background:#e0e0e0}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover:not(:disabled){opacity:.85}.btn-action{padding:4px 10px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.btn-action:hover{background:#f5f5f5}.btn-action.danger:hover{border-color:#dc3545;color:#dc3545}.actions{display:flex;gap:6px;align-items:center}.btn-icon{padding:6px 8px;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-icon:hover{transform:scale(1.05)}.btn-edit{background:#e3f2fd;color:#1976d2}.btn-edit:hover{background:#1976d2;color:#fff}.btn-delete{background:#ffebee;color:#c62828}.btn-delete:hover{background:#c62828;color:#fff}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:500;color:var(--text);font-size:14px}.form-input,.form-select,.form-textarea{box-sizing:border-box;display:block;width:100%;max-width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;background:transparent;font-size:14px;font-family:inherit;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary)}.form-input.error,.form-select.error,.form-textarea.error{border-color:#c62828}input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{box-sizing:border-box;max-width:100%;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit{padding:0;white-space:nowrap}input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:.9;cursor:pointer;padding-left:6px}.form-group,.form-row>*{min-width:0}.form-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.form-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}.form-checkbox span{font-size:14px;color:var(--text)}.form-textarea{resize:vertical;min-height:80px}.field-error{color:#c62828;font-size:12px;margin-top:4px}.form-container{max-width:800px;margin:0 auto}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}@media(max-width:768px){.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-actions{flex-direction:column;align-items:stretch}}@media(max-width:480px){.form-row{grid-template-columns:1fr;gap:12px}.form-actions .btn{width:100%}}.profile-item{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--bg);border-radius:6px}.profile-label{font-weight:500;color:var(--text);min-width:120px}.profile-value{color:#666;flex:1}.readonly-value{padding:10px 12px;background:var(--bg);border-radius:6px;color:var(--text);border:1px solid #ddd;min-height:38px;display:flex;align-items:center;font-size:14px;word-break:break-word}.readonly-value a{color:var(--text);text-decoration:none;cursor:text;word-break:break-all;max-width:100%}.readonly-text{color:var(--text);word-break:break-all}@media(max-width:768px){.page-header{gap:12px}.page-title{font-size:20px;flex:1 1 100%}.empty-state{padding:48px 16px}.empty-state-icon{font-size:48px}.btn-icon{padding:8px;min-width:36px;min-height:36px}.info-card{padding:16px}.form-row{grid-template-columns:1fr}.section-title{font-size:16px}}:root{--bg: #f5f5f5;--text: #1a1a1a;--primary: #2563eb}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);background-color:var(--bg);color:var(--text)}#root{min-height:100vh}