*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#f5f7fa;color:#333;line-height:1.6;position:relative;min-height:100vh}
body::after{content:'';display:block;height:80px}
a{text-decoration:none;color:inherit}
.container{max-width:1400px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#99CCFF,#66B2FF);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(153,204,255,.4)}
.btn-success{background:#2ed573;color:#fff}
.btn-danger{background:#ff4757;color:#fff}
.btn-warning{background:#ffa502;color:#fff}
.btn-secondary{background:#74b9ff;color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:14px 28px;font-size:16px}
.card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:24px;margin-bottom:20px;transition:all .3s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}
.card-title{font-size:18px;font-weight:600;color:#333}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee}
.table th{background:#f8f9fa;font-weight:600;color:#555}
.table tbody tr:hover{background:#f8f9fa}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}
.badge-success{background:#d4edda;color:#155724}
.badge-danger{background:#f8d7da;color:#721c24}
.badge-warning{background:#fff3cd;color:#856404}
.badge-info{background:#d1ecf1;color:#0c5460}
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:8px;font-weight:500;color:#555}
.form-control{width:100%;padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .3s}
.form-control:focus{outline:none;border-color:#99CCFF;box-shadow:0 0 0 3px rgba(153,204,255,.2)}
.form-select{width:100%;padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;background:#fff;transition:all .3s}
.form-select:focus{outline:none;border-color:#99CCFF;box-shadow:0 0 0 3px rgba(153,204,255,.2)}
.form-textarea{min-height:100px;resize:vertical}
.alert{padding:12px 16px;border-radius:8px;margin-bottom:20px;animation:slideIn .3s ease}
.alert-success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}
.alert-danger{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}
.alert-warning{background:#fff3cd;border:1px solid #ffeaa7;color:#856404}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:20px}
.pagination a,.pagination span{padding:8px 14px;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .3s}
.pagination a:hover,.pagination .active{background:#99CCFF;color:#fff;border-color:#99CCFF}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.08);text-align:center;transition:all .3s}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.stat-card h3{font-size:36px;color:#333;margin:10px 0}
.stat-card p{color:#777;font-size:14px}
.sidebar{width:260px;background:#fff;height:100vh;position:fixed;left:0;top:0;box-shadow:2px 0 12px rgba(0,0,0,.08);z-index:100;transition:all .3s}
.sidebar.collapsed{width:0;overflow:hidden}
.sidebar-header{padding:24px;text-align:center;border-bottom:1px solid #eee}
.sidebar-logo{font-size:22px;font-weight:700;color:#99CCFF}
.sidebar-menu{padding:16px 0}
.sidebar-item{display:block;padding:14px 24px;color:#555;transition:all .3s;position:relative}
.sidebar-item:hover,.sidebar-item.active{background:#f0f7ff;color:#66B2FF}
.sidebar-item::before{
    content:'';
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:12px;
    vertical-align:middle;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.sidebar-item:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0 0V3.75m0 15v-3' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(6)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h3.75m-3.75 3.75h3.75m-13.5 0h13.5m-3.75-13.5h3.75m-13.5 0h13.5' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(7)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(8)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(9)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3' /%3E%3C/svg%3E");}
.sidebar-item:nth-child(10)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E");}
.sidebar-toggle{position:absolute;right:-40px;top:20px;width:32px;height:32px;background:#fff;border-radius:0 8px 8px 0;box-shadow:2px 0 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;transition:all .3s}
.main-content{margin-left:260px;padding:24px;min-height:100vh;transition:all .3s}
.main-content.expanded{margin-left:0}
.header{background:#fff;border-radius:12px;padding:16px 24px;margin-bottom:24px;box-shadow:0 2px 12px rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center}
.header-user{display:flex;align-items:center;gap:12px}
.header-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#99CCFF,#66B2FF);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.dropdown{position:relative;z-index:1000}
.dropdown-menu{position:absolute;right:0;top:100%;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);min-width:160px;display:none;margin-top:8px;z-index:1000;animation:fadeIn .2s ease}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-item{display:block;padding:12px 16px;color:#555;transition:all .3s}
.dropdown-item:hover{background:#f0f7ff}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#99CCFF 0%,#ffffff 100%)}
.login-box{background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);padding:40px;width:100%;max-width:420px;animation:slideUp .3s ease}
.login-box h1{text-align:center;margin-bottom:32px;color:#333;font-size:28px}
.login-box .form-group{margin-bottom:24px}
.login-links{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}
.modal.show{display:flex}
.modal-content{background:#fff;border-radius:16px;padding:30px;width:100%;max-width:500px;animation:slideUp .3s ease;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;transition:all .3s}
.modal-close:hover{color:#333}
.text-center{text-align:center}
.text-right{text-align:right}
.text-primary{color:#99CCFF}
.text-success{color:#2ed573}
.text-danger{color:#ff4757}
.text-warning{color:#ffa502}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;justify-content:center;align-items:center}
.gap-10{gap:10px}
.gap-20{gap:20px}
.hidden{display:none}
.ios-switch{position:relative;display:inline-block;width:51px;height:31px}
.ios-switch input{opacity:0;width:0;height:0}
.ios-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e9e9ea;transition:.3s;border-radius:31px}
.ios-switch-slider:before{position:absolute;content:"";height:27px;width:27px;left:2px;bottom:2px;background-color:white;transition:.3s;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.ios-switch input:checked + .ios-switch-slider{background-color:#34c759}
.ios-switch input:checked + .ios-switch-slider:before{transform:translateX(20px)}
.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(153,204,255,.3);border-radius:50%;border-top-color:#99CCFF;animation:spin 1s ease-in-out infinite}
.footer{position:absolute;bottom:0;width:100%;height:80px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.footer p{color:#777;font-size:14px}
@keyframes slideIn{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sidebar{width:260px;transform:translateX(-100%);position:fixed;z-index:100}.sidebar.show{transform:translateX(0)}.main-content{margin-left:0}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}.sidebar-toggle-mobile{display:none}@media(max-width:768px){.sidebar-toggle-mobile{display:block;position:fixed;top:20px;left:20px;z-index:101;width:40px;height:40px;background:#fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer}.sidebar-toggle-mobile::before{content:'☰';font-size:20px;color:#99CCFF}}