* { box-sizing: border-box; }
body { background: #0a0f1e; color: #e2e8f0; font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; margin:0; }
.card { background: #111827; border: 1px solid #1f2937; border-radius: 14px; padding: 20px; }
.card-sm { background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 14px 16px; }
.glow-green { box-shadow: 0 0 20px rgba(16,185,129,0.15); }
.milestone-track { background: #1f2937; border-radius: 99px; height: 10px; overflow: hidden; position: relative; }
.milestone-fill { background: linear-gradient(90deg, #059669, #10b981, #34d399); height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.check-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px; cursor: pointer; border: 1px solid #1f2937; transition: all 0.2s; user-select: none; margin-bottom: 6px; }
.check-row:hover { border-color: #374151; background: #1f2937; }
.check-row.done { border-color: #064e3b; background: #022c22; }
.check-box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #374151; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.check-row.done .check-box { background: #10b981; border-color: #10b981; }
.btn { padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
.btn-green { background: #10b981; color: white; }
.btn-green:hover { background: #059669; }
.btn-ghost { background: #1f2937; color: #94a3b8; border: 1px solid #374151; }
.btn-ghost:hover { background: #374151; color: #e2e8f0; }
.btn-red { background: #dc2626; color: white; }
.btn-red:hover { background: #b91c1c; }
.btn-indigo { background: #4f46e5; color: white; }
.btn-indigo:hover { background: #4338ca; }
.input-field { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 9px 12px; color: #e2e8f0; font-size: 14px; width: 100%; outline: none; }
.input-field:focus { border-color: #10b981; }
.tab { padding: 7px 16px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; color: #6b7280; }
.tab.active { background: #10b981; color: white; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-income { background: #022c22; color: #34d399; }
.tag-expense { background: #2d1b1b; color: #f87171; }
.tag-idea { background: #1e1b4b; color: #a5b4fc; }
.streak-ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #10b981; display: flex; align-items: center; justify-content: center; flex-direction: column; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* === CHART CONTAINER FIX === */
.chart-wrapper { position: relative; width: 100%; max-width: 100%; }
.chart-wrapper canvas { display: block; width: 100% !important; height: auto !important; max-height: 220px; }
.chart-wrapper-sm canvas { display: block; width: 100% !important; height: auto !important; max-height: 120px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .chart-grid { grid-template-columns: 1fr; } }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.number-big { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.reached { opacity: 0.5; }
select { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 9px 12px; color: #e2e8f0; font-size: 14px; outline: none; }

/* === SIDEBAR NAV ITEMS === */
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:#6b7280; transition:all 0.2s; margin-bottom:2px; border:none; background:none; width:100%; text-align:left; }
.nav-item:hover { background:#1f2937; color:#e2e8f0; }
.nav-item.active { background:linear-gradient(90deg,#059669,#10b981); color:white; font-weight:600; box-shadow:0 2px 8px rgba(16,185,129,0.2); }
.nav-icon { font-size:15px; width:22px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; font-size:10px; font-weight:700; background:rgba(255,255,255,0.2); padding:1px 7px; border-radius:99px; }
/* === PAGE SYSTEM (WP-style) === */
/* display:none khi inactive; display:contents khi active → wrapper transparent với grid cha */
.page-content { display:none; }
.page-content.active { display:contents; }
/* === SIDEBAR STYLES === */
.sidebar { width: 280px; min-width: 280px; background: #0d1117; border-right: 1px solid #1f2937; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto; }
.sidebar-section { padding: 16px; border-bottom: 1px solid #1f2937; }
.skill-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; transition: all 0.2s; cursor: default; }
.skill-badge:hover { transform: translateY(-1px); }
.skill-level-4 { background: #064e3b; color: #6ee7b7; border: 1px solid #065f46; }
.skill-level-3 { background: #0f3b2e; color: #34d399; border: 1px solid #065f46; }
.skill-level-2 { background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
.skill-level-1 { background: #1e1b4b; color: #a5b4fc; border: 1px solid #312e81; }
.skill-level-0 { background: #1f2937; color: #6b7280; border: 1px solid #374151; }
.avatar-container { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid #10b981; flex-shrink: 0; cursor: pointer; }
.avatar-container:hover::after { content: '📷'; position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.avatar-container img { width: 100%; height: 100%; object-fit: cover; }
.job-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 11px; background: #1f2937; color: #94a3b8; border: 1px solid #374151; cursor: pointer; transition: all 0.2s; }
.job-tag:hover { border-color: #10b981; color: #10b981; }
.sidebar-toggle { display: none; position: fixed; bottom: 20px; left: 20px; z-index: 100; background: #10b981; color: white; border: none; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; box-shadow: 0 4px 12px rgba(16,185,129,0.3); align-items: center; justify-content: center; font-size: 20px; }
@media (max-width: 900px) { .sidebar { display: none; position: fixed; z-index: 99; } .sidebar.open { display: flex; } .sidebar-toggle { display: flex; } .main-content { margin-left: 0 !important; } }
.main-content { flex: 1; min-width: 0; }

/* ── INBOX TYPE BUTTONS (VB-ADD-02) ── */
.inbox-type-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid #374151;
  background: #0f172a;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.inbox-type-btn:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}
.inbox-type-btn.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0f172a;
}