:root { --bg-base: #f4f7fb; --bg-soft: #fbfdff; --card-bg: #ffffff; --text: #0f172a; --muted: #64748b; --primary: #3b82f6; --primary-600: #2563eb; --accent: #10b981; --warning: #f59e0b; }
html, body { height: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg-soft); }
.container { max-width: 1100px; }
.navbar { background: #ffffff !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); border-bottom: 1px solid rgba(15,23,42,0.06); }
.navbar .navbar-brand { color: var(--text) !important; }
.navbar .navbar-brand { font-weight: 600; letter-spacing: 0.2px; }
.btn { border-radius: 10px; transition: transform 150ms ease, box-shadow 150ms ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.card { background: var(--card-bg); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 16px; box-shadow: 0 12px 30px rgba(8, 15, 30, 0.08); transition: transform 220ms ease, box-shadow 220ms ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(8, 15, 30, 0.12); }
.card h3, .card h4, .card h5 { margin: 0 0 8px; }
.animated-card { animation: floatUp 500ms ease both; }
.animated-card:nth-child(1) { animation-delay: 60ms; }
.animated-card:nth-child(2) { animation-delay: 120ms; }
.animated-card:nth-child(3) { animation-delay: 180ms; }
.form-control, .form-select { border-radius: 12px; border-color: rgba(15, 23, 42, 0.12); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); border-color: var(--primary); }
.table { background: var(--card-bg); border-radius: 12px; overflow: hidden; }
.table thead th { background: #f8fafc; color: #0f172a; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.table tbody tr { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.list-group-item { border-color: rgba(15, 23, 42, 0.06); }
.page-title { color: #0f172a; }
.bg-light { background: #ffffff !important; }
.list-group-item { background-color: #ffffff; }
.stat-label { color: var(--muted); font-size: 0.9rem; }
.stat-value { font-size: 2rem; font-weight: 700; }
.login-wrap { max-width: 420px; margin: 0 auto; }
.brand-gradient { background: linear-gradient(90deg, #3b82f6, #10b981, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: gradientShift 6s ease infinite; }
@keyframes floatUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }