:root {
  --sidebar-w: 220px;
  --header-h: 50px;
  --primary: #017a0b;
  --secondary: #2ABDCE;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; font-size: 14px; }

/* Login */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.login-card { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.2); text-align: center; width: 360px; max-width: 90vw; }
.login-logo { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; }
.login-card h4 { margin: 0 0 4px; font-weight: 700; }

/* Sidebar */
#sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: #1a1a2e; color: white; display: flex; flex-direction: column; z-index: 100; transition: transform .2s; }
#sidebar.hidden { transform: translateX(-100%); }
.sidebar-header { padding: 16px; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-header i { color: var(--secondary); font-size: 22px; }
.sidebar-nav { list-style: none; padding: 8px 0; margin: 0; flex: 1; overflow-y: auto; }
.sidebar-nav li { padding: 10px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); transition: all .15s; font-size: 13px; }
.sidebar-nav li:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-nav li.active { background: rgba(42,189,206,.15); color: var(--secondary); border-left: 3px solid var(--secondary); }
.sidebar-nav li i { font-size: 16px; width: 20px; text-align: center; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); }

/* Content */
#content { margin-left: var(--sidebar-w); min-height: 100vh; }
.content-header { height: var(--header-h); background: white; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; padding: 0 20px; gap: 12px; position: sticky; top: 0; z-index: 50; }
.content-header h5 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.page { display: none; padding: 20px; }
.page.active { display: block; }

/* Stat Cards */
.stat-card { padding: 16px; border-radius: 12px; color: white; position: relative; overflow: hidden; }
.stat-card i { position: absolute; right: 12px; top: 12px; font-size: 28px; opacity: .3; }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-label { font-size: 12px; opacity: .85; margin-top: 2px; }

/* Cards */
.card { border: none; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card-header { background: white; font-weight: 600; font-size: 13px; border-bottom: 1px solid #f0f0f0; }

/* Tables */
.table { font-size: 13px; }
.table th { font-weight: 600; font-size: 12px; text-transform: uppercase; color: #666; border-bottom-width: 1px; }

/* Motion Cards */
.motion-card { background: white; border-radius: 10px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.motion-card .badge { font-size: 11px; }
.vote-bar { height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden; margin-top: 8px; }
.vote-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }

/* Prayer Card */
.prayer-card { background: white; border-radius: 10px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.prayer-card .prayer-text { font-size: 13px; margin-bottom: 8px; }
.prayer-card .prayer-meta { font-size: 11px; color: #888; }

/* Responsive */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.show { transform: translateX(0); }
  #content { margin-left: 0; }
}

/* Level badges */
.level-1 { background: #6c757d; }
.level-2 { background: #198754; }
.level-3 { background: #dc3545; }

/* Misc */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #015a08; border-color: #015a08; }
.bg-primary { background-color: var(--primary) !important; }
.text-mkccc { color: var(--primary); }
.clickable { cursor: pointer; }
.clickable:hover { background: #f8f9fa; }