/* ====================================
   QR码管理后台 - 样式表
   ==================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; line-height: 1.5; }

/* ---- Login Page ---- */
.login-body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; }
.login-header { text-align: center; padding: 30px 20px 10px; }
.login-header h1 { font-size: 24px; color: #333; margin-bottom: 4px; }
.login-header p { color: #888; font-size: 14px; }
.login-card form { padding: 20px 30px 30px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; font-weight: 500; }
.form-group input { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; transition: border .2s; }
.form-group input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
.alert { padding: 10px 16px; border-radius: 8px; font-size: 13px; margin: 0 30px; }
.alert-error { background: #fff0f0; color: #d32f2f; border: 1px solid #ffcdd2; }
.btn { display: inline-block; padding: 10px 24px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all .2s; }
.btn-primary { background: #667eea; color: #fff; }
.btn-primary:hover { background: #5a6fd6; }
.btn-block { width: 100%; margin-top: 8px; }
.login-footer { text-align: center; padding: 0 30px 24px; font-size: 12px; color: #aaa; }

/* ---- Dashboard ---- */
.dash-body { background: #f5f6fa; min-height: 100vh; }
.navbar { background: #fff; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100; }
.nav-brand { font-weight: 700; font-size: 16px; color: #333; }
.nav-menu { display: flex; align-items: center; gap: 16px; }
.nav-user { font-size: 14px; color: #666; }
.nav-link { font-size: 13px; color: #667eea; text-decoration: none; }
.nav-link:hover { text-decoration: underline; }

.main-content { max-width: 1200px; margin: 0 auto; padding: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.stat-icon.blue { background: #e8f0fe; }
.stat-icon.green { background: #e6f7ed; }
.stat-icon.purple { background: #f0e8ff; }
.stat-icon.orange { background: #fff3e0; }
.stat-number { display: block; font-size: 28px; font-weight: 700; color: #333; }
.stat-label { font-size: 13px; color: #888; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.card h3 { font-size: 15px; color: #333; margin-bottom: 12px; font-weight: 600; }

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .row { grid-template-columns: 1fr; }
}