body { background: #f4f6fa; }
.app-nav { background: linear-gradient(90deg, #1f2a44, #2f4170); }

.role-card { display: block; background: #fff; border-radius: 14px; padding: 28px 22px; text-align: center;
             color: #212529; box-shadow: 0 1px 6px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; height: 100%; }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,.13); color: #212529; }
.role-icon { width: 60px; height: 60px; border-radius: 50%; color: #fff; font-size: 26px; font-weight: 600;
             display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }

.stat { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.stat-num { font-size: 1.6rem; font-weight: 600; color: #1f2a44; }
.stat-lbl { color: #6c757d; font-size: .85rem; }

.lbl { color: #6c757d; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

.suggest-wrap { position: relative; }
.suggest-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff;
               border: 1px solid #dee2e6; border-radius: 0 0 8px 8px; max-height: 340px; overflow-y: auto;
               box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.suggest-item { padding: 8px 14px; cursor: pointer; border-bottom: 1px solid #f1f3f5; }
.suggest-item:hover, .suggest-item.active { background: #e9f0ff; }

.pre-line { white-space: pre-line; }