:root {
  --pa-primary: #4f46e5;
  --pa-secondary: #7c3aed;
  --pa-accent: #06b6d4;
  --pa-soft: #f4f7fb;
  --pa-card: #ffffff;
  --pa-text: #243144;
  --pa-muted: #6b7280;
  --pa-border: #e5e7eb;
  --pa-success: #10b981;
  --pa-warning: #f59e0b;
  --pa-danger: #ef4444;
}
body {
  background: linear-gradient(180deg, #eef3fb 0%, #f8fbff 100%);
  color: var(--pa-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.topbar {background: linear-gradient(90deg, var(--pa-primary), var(--pa-secondary)); min-height:74px; box-shadow:0 8px 24px rgba(79,70,229,.18)}
.brand-badge {width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:1.1rem}
.sidebar {min-height: calc(100vh - 74px); background:#fff; border-right:1px solid var(--pa-border); padding:1.25rem 1rem}
.menu-title {font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; margin:1rem 0 .75rem; font-weight:700}
.menu-link {display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border-radius:1rem; color:var(--pa-text); text-decoration:none; margin-bottom:.45rem; font-weight:600; transition:.2s ease}
.menu-link:hover,.menu-link.active {background:linear-gradient(90deg, rgba(79,70,229,.10), rgba(6,182,212,.10)); color:var(--pa-primary)}
.menu-link i {width:20px; text-align:center}
.page-shell {padding:1.5rem}
.hero-card,.card-soft {border:0;border-radius:1.75rem;overflow:hidden;background:#fff;box-shadow:0 18px 35px rgba(15,23,42,.06)}
.hero-card.hero-gradient {background:linear-gradient(135deg, var(--pa-primary), var(--pa-secondary)); color:#fff}
.hero-pattern {background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%), radial-gradient(circle at bottom left, rgba(255,255,255,.10), transparent 25%)}
.card-soft,.mini-card,.stat-card,.post-card,.comment-card,.profile-card {border:1px solid rgba(229,231,235,.9); border-radius:1.5rem; background:var(--pa-card); box-shadow:0 12px 24px rgba(15,23,42,.04)}
.stat-icon {width:54px;height:54px;border-radius:1rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
.badge-soft {background:rgba(79,70,229,.10);color:var(--pa-primary);border-radius:999px;padding:.45rem .8rem;font-size:.78rem;font-weight:700}
.profile-cover {height:110px;background:linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.90))}
.profile-avatar,.avatar-sm {border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; background:linear-gradient(135deg,#f59e0b,#ef4444)}
.profile-avatar {width:94px;height:94px;border:5px solid #fff;font-size:2rem;margin:-46px auto 0;box-shadow:0 10px 20px rgba(0,0,0,.12)}
.avatar-sm {width:52px;height:52px;font-size:1rem}
.section-title {font-weight:800; letter-spacing:-.02em}
.small-muted {color:var(--pa-muted); font-size:.93rem}
.post-banner {min-height:220px;border-radius:1.25rem;background:linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.90)); position:relative; overflow:hidden}
.post-banner::after {content:"Portal Escolar Interactivo"; position:absolute; right:1rem; bottom:1rem; background:rgba(255,255,255,.15); color:#fff; padding:.55rem .9rem; border-radius:999px; backdrop-filter:blur(6px); font-weight:700}
.reaction-btn {border:1px solid var(--pa-border); background:#fff; border-radius:999px; padding:.55rem .9rem; font-weight:600; color:var(--pa-text); text-decoration:none}
.reaction-btn:hover {border-color:var(--pa-primary); color:var(--pa-primary)}
.search-box {border-radius:999px; border:1px solid var(--pa-border); padding-left:2.5rem; height:48px}
.search-wrap {position:relative}
.search-wrap i {position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#94a3b8}
.table-card table tr:last-child td {border-bottom:none}
.form-control,.form-select,.btn {border-radius:1rem}
.login-shell {min-height:calc(100vh - 74px); display:flex; align-items:center; justify-content:center; padding:2rem}
.login-card {max-width:430px; width:100%}
.empty-state {padding:3rem 2rem; text-align:center; color:var(--pa-muted)}
@media (max-width: 991.98px) {.sidebar{min-height:auto;border-right:0;border-bottom:1px solid var(--pa-border)} .page-shell{padding:1rem}}