:root {
    --green: #0b7a4b;
    --dark: #073b2a;
    --gold: #f7c948;
    --soft: #f4f7fb;
}
body { font-family: Arial, Helvetica, sans-serif; color: #1f2937; }
.app-navbar { background: linear-gradient(90deg, var(--dark), var(--green)); }
.hero-section {
    padding-top: 78px;
    background: radial-gradient(circle at top right, rgba(247, 201, 72, .35), transparent 30%), linear-gradient(135deg, #06452f, #0b7a4b 55%, #0f9f68);
    min-height: 720px;
    display: flex;
    align-items: center;
}
.text-white-75 { color: rgba(255, 255, 255, .78); }
.hero-card, .login-card, .preview-panel, .feature-card, .dashboard-shell { background: #fff; border-radius: 28px; }
.hero-card { padding: 28px; }
.school-logo {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 700;
}
.metric { background: var(--soft); border-radius: 20px; padding: 18px; }
.metric strong, .stat-box strong { display: block; font-size: 30px; color: var(--green); }
.metric span, .stat-box span { font-size: 14px; color: #64748b; }
.activity-feed div { border-left: 4px solid var(--gold); padding: 10px 0 10px 14px; margin-bottom: 10px; background: #fffbea; }
.activity-feed span { display: block; color: #64748b; }
.section-pad { padding: 88px 0; }
.section-label { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; color: var(--green); }
.login-card, .preview-panel { padding: 30px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
.nav-pills .nav-link { color: var(--green); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--green); }
.timeline div { display: flex; gap: 16px; margin-bottom: 22px; }
.timeline span { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; font-weight: 800; }
.timeline p { margin: 0; }
.feature-card { padding: 28px; border: 1px solid #e5e7eb; box-shadow: 0 12px 30px rgba(15, 23, 42, .05); transition: .25s; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--green); }
.feature-card h5 { color: var(--dark); font-weight: 800; }
.feature-card p { color: #64748b; margin: 0; }
.dashboard-shell { display: grid; grid-template-columns: 260px 1fr; overflow: hidden; }
.dashboard-shell aside { background: linear-gradient(180deg, var(--dark), var(--green)); padding: 28px 12px; }
.dashboard-shell aside a { display: block; color: rgba(255, 255, 255, .88); text-decoration: none; padding: 13px 18px; border-radius: 14px; margin-bottom: 6px; }
.dashboard-shell aside a:hover { background: rgba(255, 255, 255, .14); }
.dashboard-content { padding: 30px; }
.stat-box, .panel { background: var(--soft); border-radius: 20px; padding: 22px; }
.chip { display: inline-block; background: #e0f2fe; color: #075985; padding: 9px 13px; border-radius: 999px; margin: 5px; font-weight: 700; font-size: 13px; }
.chip-green { background: #dcfce7; color: #166534; }
.chip-yellow { background: #fef3c7; color: #92400e; }
.app-footer { background: var(--dark); }
@media (max-width: 991px) {
    .hero-section { min-height: auto; }
    .dashboard-shell { grid-template-columns: 1fr; }
    .dashboard-shell aside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .dashboard-shell aside h5 { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .section-pad { padding: 58px 0; }
    .hero-card, .login-card, .preview-panel { border-radius: 20px; padding: 20px; }
    .dashboard-shell aside { grid-template-columns: 1fr; }
    .dashboard-content { padding: 20px; }
    .display-5 { font-size: 2.1rem; }
}
.app-body { background: #f5f7fb; }
.app-layout { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - 56px); }
.sidebar { background: linear-gradient(180deg, var(--dark), var(--green)); padding: 26px 14px; }
.sidebar h5 { color: #fff; padding: 0 14px 14px; }
.sidebar a { color: rgba(255,255,255,.9); display: block; padding: 12px 16px; border-radius: 14px; text-decoration: none; margin-bottom: 5px; }
.sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,.16); color: #fff; }
.content { padding: 30px; }
.login-page { min-height: 100vh; background: linear-gradient(135deg, #06452f, #0b7a4b); display: grid; place-items: center; padding: 24px; }
.login-shell { display: grid; grid-template-columns: 1fr 440px; width: min(1040px, 100%); gap: 30px; align-items: center; }
.login-brand { color: #fff; }
.login-brand h1 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); }
.forum-post { background: #fff; border-radius: 18px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 25px rgba(15, 23, 42, .05); }
.forum-post span { color: #64748b; font-size: 13px; }
.rich-editor { min-height: 150px; font-family: Arial, Helvetica, sans-serif; }
@media (max-width: 900px) {
    .app-layout, .login-shell { grid-template-columns: 1fr; }
    .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .sidebar h5 { grid-column: 1 / -1; }
    .content { padding: 18px; }
}
.sidebar a { align-items: center; display: flex; gap: 11px; }
.sidebar a i { color: #fff; font-size: 1.1rem; width: 22px; text-align: center; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.page-heading h1 { font-weight: 800; margin: 0; color: #0f172a; }
.modern-alert { border: 0; border-radius: 18px; box-shadow: 0 14px 35px rgba(15,23,42,.08); display: flex; gap: 12px; align-items: center; font-weight: 700; margin-bottom: 20px; padding: 16px 18px; }
.modern-alert-success { background: #dcfce7; color: #166534; }
.modern-alert-warning { background: #fef3c7; color: #92400e; }
.modern-alert-danger { background: #fee2e2; color: #991b1b; }
.modern-form .form-control, .modern-form .form-select, .filter-bar .form-control, .filter-bar .form-select { border: 1px solid #dbe3ef; border-radius: 14px; min-height: 46px; }
.profile-card { background: linear-gradient(135deg,#ffffff,#f0fdf4); border: 1px solid #dbeafe; border-radius: 28px; display: flex; gap: 24px; padding: 28px; box-shadow: 0 18px 45px rgba(15,23,42,.08); }
.profile-card span { color: #64748b; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.list-modern { display: grid; gap: 12px; }
.list-modern > div { align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 14px 16px; }
.list-modern span { color: #64748b; }
.filter-bar { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto auto; gap: 10px; align-items: center; }
.table thead th { color: #475569; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 768px) { .page-heading, .profile-card { align-items: flex-start; flex-direction: column; } .filter-bar { grid-template-columns: 1fr; } .list-modern > div { grid-template-columns: 1fr; } }