* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; color:#333; background:#f5f6fa; }
a { color:#4a6cf7; text-decoration:none; }

.layout { display:flex; min-height:100vh; }

.sidebar { width:220px; background:#1a1a2e; color:#fff; padding:24px 0; flex-shrink:0; }
.sidebar-logo { font-size:20px; font-weight:700; text-align:center; letter-spacing:3px; padding:0 20px 4px; }
.sidebar-sub { font-size:12px; text-align:center; color:rgba(255,255,255,.5); margin-bottom:28px; letter-spacing:2px; }
.sidebar-nav { }
.nav-item { display:block; padding:11px 24px; color:rgba(255,255,255,.7); font-size:14px; cursor:pointer; transition:all .2s; border-left:3px solid transparent; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.12); color:#fff; border-left-color:#c9a96e; }
.nav-item .icon { margin-right:8px; }
.nav-group-label { padding:16px 24px 6px; font-size:11px; color:rgba(255,255,255,.35); letter-spacing:2px; text-transform:uppercase; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.header { height:56px; background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0; }
.header-title { font-size:16px; font-weight:600; color:#1a1a2e; }
.header-right { display:flex; align-items:center; gap:16px; font-size:13px; color:#888; }
.logout-link { color:#e74c3c; font-size:13px; cursor:pointer; }
.logout-link:hover { text-decoration:underline; }

.content { padding:24px; flex:1; }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1a1a2e,#2d2d3f); }
.login-box { width:380px; background:#fff; border-radius:12px; padding:48px 36px 36px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.login-logo { font-size:28px; font-weight:700; text-align:center; color:#1a1a2e; letter-spacing:4px; margin-bottom:4px; }
.login-subtitle { text-align:center; color:#999; font-size:13px; margin-bottom:32px; letter-spacing:2px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; color:#666; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#4a6cf7; }
.form-group textarea { resize:vertical; min-height:80px; }
.error-msg { color:#e74c3c; font-size:13px; text-align:center; margin-top:8px; }

.btn { display:inline-block; padding:9px 20px; border:none; border-radius:6px; font-size:14px; cursor:pointer; transition:all .2s; }
.btn-primary { background:#1a1a2e; color:#fff; }
.btn-primary:hover { background:#2d2d3f; }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.btn-info { background:#4a6cf7; color:#fff; }
.btn-info:hover { background:#3b5de7; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-block { width:100%; padding:12px; }

.card { background:#fff; border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:16px; font-weight:600; color:#1a1a2e; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border-radius:10px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.stat-card .stat-value { font-size:32px; font-weight:700; color:#1a1a2e; }
.stat-card .stat-label { font-size:13px; color:#999; margin-top:4px; }
.stat-card.pending .stat-value { color:#e67e22; }
.stat-card.confirmed .stat-value { color:#27ae60; }
.stat-card.today .stat-value { color:#4a6cf7; }

table { width:100%; border-collapse:collapse; }
th,td { padding:10px 12px; text-align:left; border-bottom:1px solid #f0f0f0; font-size:13px; }
th { background:#fafafa; font-weight:600; color:#666; white-space:nowrap; }
tr:hover td { background:#fafbfc; }

.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:500; }
.badge-success { background:#e8f8ef; color:#27ae60; }
.badge-warning { background:#fef3e2; color:#e67e22; }
.badge-info { background:#eef0fb; color:#4a6cf7; }
.badge-danger { background:#fde8e8; color:#e74c3c; }
.badge-default { background:#f5f5f5; color:#999; }

.tag { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; background:#f5f5f5; color:#666; margin:2px 4px 2px 0; }
.perm-tag { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; margin:2px; background:#eef0fb; color:#4a6cf7; border:1px solid #d0d5f7; }
.perm-tag.checked { background:#1a1a2e; color:#fff; border-color:#1a1a2e; cursor:pointer; }

.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar input, .toolbar select { padding:8px 12px; border:1px solid #ddd; border-radius:6px; font-size:13px; }
.toolbar input { width:200px; }

.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.pagination .btn { padding:6px 12px; font-size:12px; }
.pagination .page-info { font-size:13px; color:#999; }

.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:1000; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:560px; max-width:90vw; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
.modal-title { font-size:16px; font-weight:600; }
.modal-close { font-size:22px; cursor:pointer; color:#999; }
.modal-close:hover { color:#333; }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-body .form-group { margin-bottom:16px; }
.modal-footer { padding:12px 20px; border-top:1px solid #eee; text-align:right; display:flex; gap:8px; justify-content:flex-end; }

.perm-grid { display:flex; flex-wrap:wrap; gap:6px; }
.perm-check { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #ddd; border-radius:6px; cursor:pointer; font-size:13px; transition:all .2s; }
.perm-check:hover { border-color:#4a6cf7; }
.perm-check.checked { background:#1a1a2e; color:#fff; border-color:#1a1a2e; }
.perm-check input { display:none; }

.actions { display:flex; gap:6px; }

.empty { text-align:center; padding:40px; color:#ccc; font-size:14px; }

.upload-area { border:1px dashed #ddd; border-radius:8px; padding:12px; }
.avatar-preview { margin-bottom:8px; }
.photo-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.photo-item { width:80px; height:80px; border-radius:6px; overflow:hidden; position:relative; background:#f5f5f5; border:1px solid #eee; }
.photo-item.video-item { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#1a1a2e; color:#fff; }
.photo-item .photo-icon { font-size:24px; }
.photo-item .photo-label { font-size:10px; margin-top:2px; }
.photo-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; background:rgba(0,0,0,.5); color:#fff; border-radius:50%; font-size:12px; line-height:18px; text-align:center; cursor:pointer; }
.photo-remove:hover { background:rgba(231,76,60,.9); }
.upload-btns { display:flex; gap:8px; }

.popup-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); z-index:2000; display:flex; align-items:center; justify-content:center; }
.popup-card { background:#fff; border-radius:10px; width:360px; max-width:90vw; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.popup-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; font-size:14px; font-weight:600; }
.popup-close { font-size:20px; cursor:pointer; color:#999; line-height:1; }
.popup-close:hover { color:#333; }
.popup-body { padding:16px; }
.popup-body .info-row { padding:6px 0; border-bottom:1px solid #f5f5f5; font-size:13px; color:#555; display:flex; }
.popup-body .info-row:last-child { border-bottom:none; }
.popup-body .info-label { color:#999; width:70px; flex-shrink:0; }
.popup-body .info-value { flex:1; }