.panel-body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f1f5f9; min-height: 100vh; }
.font-mono-tech { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.panel-header { background: rgba(15, 23, 42, 0.98); border-bottom: 1px solid rgba(34, 211, 238, 0.15); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
.panel-header-user { color: #e2e8f0; font-weight: 600; font-size: 0.875rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-page-title { color: #0f172a; }
.panel-page-subtitle { color: #64748b; }
.panel-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #0891b2, #2563eb); color: #fff; font-weight: 800; font-family: 'JetBrains Mono', monospace; box-shadow: 0 0 20px rgba(34, 211, 238, 0.25); }
.panel-nav-link { padding: 0.5rem 1rem; border-radius: 10px; color: #94a3b8; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; }
.panel-nav-link:hover { color: #22d3ee; background: rgba(51, 65, 85, 0.5); }
.panel-nav-danger:hover { color: #f87171 !important; }
.panel-footer { border-top: 1px solid #e2e8f0; background: #fff; margin-top: auto; }
.panel-card { background: #fff; border-radius: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); }
.panel-card-dark { background: #1e293b; border-color: rgba(34, 211, 238, 0.15); color: #e2e8f0; }
.panel-stat { text-align: center; padding: 1.5rem; }
.panel-stat-num { font-size: 2rem; font-weight: 800; color: #0891b2; font-family: 'JetBrains Mono', monospace; }
.panel-progress { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.panel-progress-bar { height: 100%; background: linear-gradient(90deg, #0891b2, #2563eb); border-radius: 999px; transition: width 0.5s ease; }
.panel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; transition: all 0.2s; }
.panel-btn-primary { background: linear-gradient(135deg, #0891b2, #2563eb); color: #fff; }
.panel-btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.panel-btn-outline { border: 2px solid #0891b2; color: #0891b2; background: transparent; }
.panel-btn-outline:hover { background: #ecfeff; }
.panel-input { width: 100%; padding: 0.875rem 1rem; border: 1px solid #cbd5e1; border-radius: 12px; outline: none; transition: border 0.2s; }
.panel-input:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.badge-item { text-align: center; padding: 1.25rem 0.75rem; border-radius: 1rem; border: 1px solid #e2e8f0; background: #f8fafc; transition: transform 0.2s; }
.badge-item.earned { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff); box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2); }
.badge-item.locked { opacity: 0.45; filter: grayscale(0.8); }
.badge-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; }
.portal-hero { text-align: center; padding: 3rem 1rem 2rem; color: #fff; }
.portal-card { max-width: 420px; margin: 0 auto; }