*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,PingFang SC,sans-serif;background:linear-gradient(135deg,#f0f4f8,#e8f5e9,#e1f5fe);min-height:100vh;padding:24px;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 30%,rgba(129,199,132,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(100,181,246,.08) 0%,transparent 50%);pointer-events:none;z-index:0}body:after{content:"";display:none}.container{max-width:1400px;margin:0 auto;background:#fffffff2;border-radius:24px;box-shadow:0 8px 32px #00000014,0 2px 8px #0000000a;overflow:hidden;border:1px solid rgba(255,255,255,.8);position:relative;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.container:before{content:"";display:none}header{background:linear-gradient(135deg,#81c784,#64b5f6);color:#fff;padding:48px 32px;border-bottom:none;position:relative;z-index:1;border-radius:24px 24px 0 0}header:before{content:"";display:none}@keyframes scanline{0%{transform:translate(-100%)}to{transform:translate(100%)}}header h1{font-size:2.2em;font-weight:600;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.1);position:relative;z-index:1}@keyframes glow{0%{text-shadow:0 2px 8px rgba(0,0,0,.1)}to{text-shadow:0 2px 12px rgba(0,0,0,.15)}}.search-panel{padding:32px;background:#fafbfc;border-bottom:1px solid #e8eaed;position:relative;z-index:1}.search-panel h2{color:#37474f;margin-bottom:24px;font-size:1.2em;font-weight:600;letter-spacing:-.3px}.search-form{display:flex;flex-direction:column;gap:15px}.form-row{display:flex;gap:15px;flex-wrap:wrap;position:relative}.form-group{flex:1;min-width:200px;display:flex;flex-direction:column}.form-group label{margin-bottom:8px;color:#546e7a;font-weight:500;font-size:.9em}.form-group input,.form-group select{padding:12px 16px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:14px;background:#fff;color:#37474f;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-group input:focus,.form-group select:focus{outline:none;border-color:#81c784;box-shadow:0 0 0 3px #81c7841a;background:#fff}.form-group input::placeholder{color:#b0bec5}.form-group select option{background:#fff;color:#37474f}.btn{padding:11px 24px;border:none;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:#fff;position:relative;overflow:hidden;letter-spacing:.3px}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-primary{background:linear-gradient(135deg,#64b5f6,#42a5f5);box-shadow:0 4px 12px #42a5f540}.btn-logout{background:linear-gradient(135deg,#ef5350,#e53935);box-shadow:0 4px 12px #e5393540}.btn-logout:hover{box-shadow:0 6px 20px #e5393559}.btn-primary:hover{box-shadow:0 6px 20px #42a5f559}.btn-secondary{background:linear-gradient(135deg,#90a4ae,#78909c);box-shadow:0 4px 12px #78909c40}.btn-secondary:hover{box-shadow:0 6px 20px #78909c59}.btn-success{background:linear-gradient(135deg,#81c784,#66bb6a);box-shadow:0 4px 12px #66bb6a40}.btn-success:hover{box-shadow:0 6px 20px #66bb6a59}.btn-danger{background:linear-gradient(135deg,#ef5350,#e53935);box-shadow:0 4px 12px #e5393540}.btn-danger:hover{box-shadow:0 6px 20px #e5393559}.btn-warning{background:linear-gradient(135deg,#ffb74d,#ffa726);box-shadow:0 4px 12px #ffa72640}.btn-warning:hover{box-shadow:0 6px 20px #ffa72659}.btn-info{background:linear-gradient(135deg,#4fc3f7,#29b6f6);box-shadow:0 4px 12px #29b6f640}.btn-info:hover{box-shadow:0 6px 20px #29b6f659}.btn-sm{padding:9px 18px;font-size:13px;background:linear-gradient(135deg,#64b5f6,#42a5f5);color:#fff;font-weight:500;box-shadow:0 3px 10px #42a5f533}.btn-sm:hover{background:linear-gradient(135deg,#42a5f5,#2196f3);box-shadow:0 5px 16px #42a5f54d}.btn-sm:disabled{background:#cfd8dc;cursor:not-allowed;transform:none;opacity:.6;box-shadow:none}.table-container{padding:32px;overflow-x:auto;background:#fff;position:relative;z-index:1}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e8eaed;border-radius:12px;overflow:hidden}thead{background:linear-gradient(135deg,#f5f7fa,#eceff1);color:#37474f;border-bottom:2px solid #e0e0e0}th{padding:16px;text-align:left;font-weight:600;white-space:nowrap;letter-spacing:.3px;font-size:13px}td{padding:14px 16px;border-bottom:1px solid #f5f5f5;color:#546e7a;font-size:14px}tbody tr:hover{background:#f8fafb;box-shadow:0 2px 8px #0000000a}tbody tr{transition:all .3s cubic-bezier(.4,0,.2,1)}.action-buttons{display:flex;gap:8px}.pagination{padding:24px 32px;display:flex;justify-content:space-between;align-items:center;background:#fafbfc;border-top:1px solid #e8eaed;position:relative;z-index:1;border-radius:0 0 24px 24px}.site-footer{display:flex;justify-content:center;padding:22px 32px 28px;background:linear-gradient(180deg,#fafbfceb,#f5f8fafa);border-top:1px solid rgba(224,232,237,.9)}.site-footer__record{color:#78909c;font-size:13px;line-height:1.6;text-decoration:none;letter-spacing:.2px;transition:color .2s ease,opacity .2s ease}.site-footer__record:hover{color:#546e7a}.pagination-info{color:#546e7a;font-weight:500;font-size:14px}.pagination-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pagination-controls span{color:#546e7a;font-size:14px;white-space:nowrap}#pageSizeSelect{padding:9px 14px;border:1.5px solid #e0e0e0;border-radius:12px;background:#fff;color:#37474f;font-weight:500;font-size:13px}#pageSizeSelect:focus{outline:none;border-color:#81c784;box-shadow:0 0 0 3px #81c7841a}.modal{display:flex;align-items:center;justify-content:center;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:#0006;animation:fadeIn .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;width:90%;max-width:600px;border-radius:20px;overflow:hidden;animation:slideDown .3s cubic-bezier(.4,0,.2,1);border:1px solid #e8eaed;box-shadow:0 16px 48px #0000001f}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{background:linear-gradient(135deg,#81c784,#64b5f6);color:#fff;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:none}.modal-header h2{font-size:1.4em;font-weight:600;letter-spacing:-.3px}.close,.close-btn{font-size:24px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:#fff;opacity:.85;background:none;border:none;line-height:1}.close:hover,.close-btn:hover{opacity:1;transform:rotate(90deg)}.modal-body{padding:32px;background:#fff}.modal-footer{padding:24px 32px;background:#fafbfc;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #e8eaed}.required{color:#ef5350}#editForm .form-group{margin-bottom:20px}#editForm .form-group label{display:block;margin-bottom:8px;font-weight:500;color:#546e7a}#editForm .form-group input,#editForm .form-group select{width:100%}.loading{text-align:center;padding:40px;color:#64b5f6;font-size:1.1em}.error-message{background:#ef53501a;color:#e53935;padding:16px;border-radius:12px;margin:20px 32px;border:1.5px solid rgba(239,83,80,.3);box-shadow:0 4px 12px #ef53501a}.success-message{background:#81c7841a;color:#43a047;padding:16px;border-radius:12px;margin:20px 32px;border:1.5px solid rgba(129,199,132,.3);box-shadow:0 4px 12px #81c7841a}.empty-state{text-align:center;padding:60px 20px;color:#90a4ae;font-size:1em}.empty-state svg{width:120px;height:120px;margin-bottom:20px;opacity:.4}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #b0bec5;border-radius:5px;background:#fff;cursor:pointer;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}input[type=checkbox]:checked{background:linear-gradient(135deg,#81c784,#66bb6a);border-color:#66bb6a;box-shadow:0 2px 8px #66bb6a4d}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:12px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f5f5f5;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#b0bec5,#90a4ae);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#90a4ae,#78909c)}select option{background:#fff;color:#37474f;padding:10px}td{word-break:break-word}.btn{-webkit-tap-highlight-color:rgba(129,199,132,.2);touch-action:manipulation}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}.loading:after{content:"...";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}@media (max-width: 768px){body{padding:10px}body:after{font-size:50px;bottom:10px;right:10px;opacity:.5}.container{border-radius:10px}.container:before{font-size:60px;letter-spacing:5px;opacity:.5}header{padding:25px 20px}header h1{font-size:1.5em;letter-spacing:2px}header #deviceInfo{font-size:12px;margin-top:10px}.search-panel{padding:20px}.search-panel h2{font-size:1.1em;margin-bottom:15px}.form-row{flex-direction:column;gap:10px}.form-group{min-width:100%}.btn{width:100%;padding:12px 20px;font-size:15px}.table-container{padding:15px;overflow-x:auto}table{font-size:13px;min-width:800px}th,td{padding:10px 8px;font-size:13px}.action-buttons{flex-direction:column;gap:5px}.action-buttons .btn{width:100%;padding:8px 12px;font-size:13px}.pagination{flex-direction:column;gap:15px;padding:15px 20px}.site-footer{padding:18px 20px 24px}.pagination-info{font-size:14px}.pagination-controls{justify-content:center;gap:8px}.pagination-controls .btn-sm{padding:10px 14px;font-size:13px}#pageSizeSelect{padding:10px;font-size:13px}.modal-content{width:95%;margin:20px auto}.modal-header{padding:15px 20px}.modal-header h2{font-size:1.2em;letter-spacing:1px}.modal-body{padding:20px}.modal-footer{padding:15px 20px;flex-wrap:wrap}.modal-footer .btn{flex:1;min-width:120px}}@media (max-width: 480px){header h1{font-size:1.2em;letter-spacing:1px}.search-panel h2{font-size:1em}.btn{font-size:14px;padding:10px 15px}table{font-size:12px}th,td{padding:8px 6px;font-size:12px}.pagination-controls .btn-sm{padding:8px 10px;font-size:12px}}.password-modal-content{max-width:480px;animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity}@keyframes bounceIn{0%{transform:scale(.5) translateY(-50px);opacity:0}60%{transform:scale(1.03) translateY(0);opacity:1}80%{transform:scale(.98)}to{transform:scale(1);opacity:1}}.password-input-container{display:flex;flex-direction:column;gap:16px}.password-input-container label{font-weight:600;color:#37474f;font-size:15px;margin-bottom:-8px}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper input{width:100%;padding:14px 50px 14px 16px;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;background:#fafbfc;color:#37474f;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit}.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:6px 8px;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;color:#607d8b;transition:all .2s ease}.eye-btn:hover{color:#1e88e5}.password-input-wrapper input::-ms-reveal,.password-input-wrapper input::-ms-clear{display:none}.password-input-wrapper input::-webkit-credentials-auto-fill-button,.password-input-wrapper input::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0}.password-input-wrapper input:focus{outline:none;border-color:#81c784;box-shadow:0 0 0 4px #81c78426;background:#fff}.password-input-wrapper input::placeholder{color:#b0bec5}.modal-tip{margin-bottom:12px;color:#546e7a;font-size:14px;line-height:1.6}.toggle-password{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px}.toggle-password:hover{background:#81c7841a}.toggle-password span{font-size:20px;-webkit-user-select:none;user-select:none}.password-error{padding:12px 16px;background:#ef53501a;border:1.5px solid rgba(239,83,80,.3);border-radius:10px;color:#e53935;font-size:14px;font-weight:500;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.password-remember{display:flex;align-items:center;padding:12px 16px;background:#64b5f614;border-radius:10px;border:1.5px solid rgba(100,181,246,.2)}.remember-checkbox,.password-remember label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;margin:6px 0 0}.remember-checkbox input[type=checkbox],.password-remember input[type=checkbox]{margin:0;accent-color:#64b5f6;width:16px;height:16px}.remember-checkbox input[type=checkbox]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;border:1px solid #b0bec5;border-radius:4px;box-shadow:none;background:#fff}.remember-checkbox input[type=checkbox]:checked{background:#64b5f6;border-color:#64b5f6;box-shadow:none}.remember-checkbox input[type=checkbox]:checked:after{content:none}.remember-checkbox{color:#546e7a;font-size:14px;font-weight:500}@media (max-width: 480px){.password-modal-content{max-width:95%}.password-input-wrapper input{padding:12px 45px 12px 14px;font-size:14px}.toggle-password span{font-size:18px}}#messageModal{align-items:flex-start!important;padding-top:80px;z-index:9999!important}.message-modal-content{max-width:320px;animation:messageSlideDown .3s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity;box-shadow:0 8px 24px #0000001f;border-radius:16px}@keyframes messageSlideDown{0%{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}.message-container{padding:20px 24px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px}.message-icon{font-size:28px;line-height:1;animation:iconPop .4s ease-out;flex-shrink:0}@keyframes iconPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.message-text{font-size:15px;color:#37474f;line-height:1.5;margin:0;font-weight:500}.message-success .message-icon{color:#43a047}.message-error .message-icon{color:#e53935}.message-warning .message-icon{color:#f39c12}.message-info .message-icon{color:#1e88e5}
