* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body {
    background: #f0f2f5;
    min-height: 100vh;
}
.navbar {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding:0 20px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:100;
}
.navbar .left{display:flex;align-items:center;gap:14px;}
.navbar .right{display:flex;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:#1a1a1a;}
.brand img{width:30px;height:30px;border-radius:50%;}
.balance-tag{background:#e3f2fd;color:#1565c0;font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px;}

.hamburger{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    padding:8px;
    border-radius:8px;
    position:relative;
    z-index:9999;
    pointer-events:auto !important;
    background:#ffffff;
}
.hamburger span{
    display:block;
    height:3px;
    width:24px;
    background:#222;
    border-radius:3px;
    transition:0.25s ease;
}
.hamburger.active span:nth-child(1){transform: translateY(9px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform: translateY(-9px) rotate(-45deg);}

.drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:8888;
    opacity:0;
    visibility:hidden;
    transition:0.25s;
}
.drawer-overlay.show{opacity:1;visibility:visible;}

.drawer{
    position:fixed;
    top:0;
    left:0;
    width:270px;
    height:100%;
    background:#fff;
    z-index:8889;
    transform:translateX(-100%);
    transition:0.25s;
    display:flex;
    flex-direction:column;
    box-shadow:4px 0 20px rgba(0,0,0,0.1);
}
.drawer.show{transform:translateX(0);}

.drawer-header{
    padding:22px 20px;
    border-bottom:1px solid #f0f0f0;
    display:flex;
    align-items:center;
    gap:12px;
}
.drawer-header img{width:44px;height:44px;border-radius:50%;}
.drawer-header .info .name{font-size:15px;font-weight:600;color:#1a1a1a;}
.drawer-header .info .balance{font-size:12px;color:#888;margin-top:2px;}
.drawer-menu{flex:1;padding:12px 0;overflow-y:auto;}
.drawer-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 20px;
    color:#333;
    text-decoration:none;
    font-size:14px;
}
.drawer-menu a:hover{background:#f5f5f5;}
.drawer-menu a.active{background:#e3f2fd;color:#1565c0;font-weight:500;}
.drawer-menu a .icon{width:18px;height:18px;flex-shrink:0;}
.drawer-menu .divider{height:1px;background:#f0f0f0;margin:8px 0;}

.user-menu{position:relative;}
.user-menu .avatar-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 10px 4px 4px;
    border-radius:30px;
    background:#f5f5f5;
    cursor:pointer;
}
.user-menu .avatar-btn:hover{background:#eaeaea;}
.user-menu .avatar-btn img{width:32px;height:32px;border-radius:50%;}
.user-menu .avatar-btn .uname{font-size:13px;color:#333;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-menu .avatar-btn svg{width:14px;height:14px;color:#999;}
.user-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:260px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
    z-index:5000;
    display:none;
    overflow:hidden;
}
.user-dropdown.show{display:block;}
.user-dropdown .dd-header{padding:16px;background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;}
.user-dropdown .dd-header .name{font-size:15px;font-weight:600;margin-bottom:4px;}
.user-dropdown .dd-header .balance{font-size:13px;opacity:0.9;}
.user-dropdown .dd-menu{padding:6px 0;}
.user-dropdown .dd-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    color:#333;
    text-decoration:none;
    font-size:14px;
    border:none;
    background:none;
    width:100%;
    text-align:left;
    cursor:pointer;
}
.user-dropdown .dd-menu a:hover{background:#f5f5f5;}
.user-dropdown .dd-menu a .dicon{width:16px;height:16px;color:#666;}
.user-dropdown .dd-divider{height:1px;background:#f0f0f0;margin:4px 0;}
.user-dropdown .dd-menu a.danger{color:#d32f2f;}
.user-dropdown .dd-menu a.danger .dicon{color:#d32f2f;}

.container{max-width:1200px;margin:0 auto;padding:24px 20px 60px;}
.page-title{font-size:20px;font-weight:600;color:#1a1a1a;margin-bottom:16px;}
.panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04);padding:22px;margin-bottom:20px;}
.panel h3{font-size:15px;font-weight:600;margin-bottom:14px;}

.btn{padding:10px 24px;font-size:14px;font-weight:500;color:#fff;background:#333;border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;}
.btn:hover{background:#1a1a1a;}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px;}
.btn-outline{background:transparent;color:#333;border:1px solid #ccc;}
.btn-outline:hover{background:#f5f5f5;}
.btn-primary{background:#1976d2;color:#fff;}
.btn-primary:hover{background:#1565c0;}
.btn-danger{background:#d32f2f;color:#fff;}
.btn-danger:hover{background:#b71c1c;}
.btn-success{background:#2e7d32;color:#fff;}
.btn-success:hover{background:#1b5e20;}
.btn-warning{background:#ff9800;color:#fff;}
.btn-warning:hover{background:#f57c00;}

.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500;}
.form-group input,.form-group select{width:100%;padding:10px 14px;font-size:14px;border:1px solid #ddd;border-radius:8px;background:#fafafa;outline:none;}
.form-group input:focus,.form-group select:focus{border-color:#333;background:#fff;}

.message{font-size:13px;margin-top:12px;min-height:18px;color:#d32f2f;}
.message.success{color:#2e7d32;}
.empty{text-align:center;color:#bbb;padding:30px 0;font-size:14px;}

.switch{position:relative;display:inline-block;width:42px;height:24px;vertical-align:middle;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:0.3s;border-radius:24px;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:0.3s;border-radius:50%;}
.switch input:checked + .slider{background-color:#1976d2;}
.switch input:checked + .slider:before{transform:translateX(18px);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.show{display:flex;}
.modal{background:#fff;border-radius:14px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;}

@media(max-width:700px){
    .container{padding:16px 12px 40px;}
    .user-menu .avatar-btn .uname{display:none;}
    .user-dropdown{width:220px;}
    .navbar{padding:0 12px;}
}