html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ===== ANIMATION SYSTEM ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-6px) rotate(1deg); } 66% { transform: translateY(3px) rotate(-0.5deg); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
@keyframes typing { 0% { width: 0; } 100% { width: 100%; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes toastSlide { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes modalZoom { from { transform: scale(0.92) translateY(12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes skeletonPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
/* GPU Acceleration */
.gpu { transform: translateZ(0); will-change: transform; backface-visibility: hidden; perspective: 1000px; }
.will-opacity { will-change: opacity; }
/* Cursor Glow */
.cg-dot, .cg-ring { position: fixed; pointer-events: none; z-index: 99999; border-radius: 50%; opacity: 0; transition: opacity 0.2s; }
.cg-dot { width: 6px; height: 6px; background: #6366f1; transform: translate(-50%, -50%); }
.cg-ring { width: 36px; height: 36px; border: 1.5px solid rgba(99,102,241,0.25); transform: translate(-50%, -50%); }
/* Cursor Glow - Hide on touch */
@media (hover: none) and (pointer: coarse) { .cg-dot, .cg-ring { display: none !important; } }
/* Gradient Orbs */
.grad-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: 0.15; }
.gorb-0 { background: #6366f1; }
.gorb-1 { background: #8b5cf6; }
.gorb-2 { background: #06b6d4; }
.gorb-3 { background: #f59e0b; }
/* Particles Canvas */
.particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.35; }
/* Navbar Glass */
.nav-scrolled { background: rgba(255,255,255,0.8) !important; backdrop-filter: blur(16px) saturate(1.3) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3) !important; border-bottom: 1px solid rgba(226,232,240,0.6) !important; }
.nav-underline { position: absolute; bottom: 2px; left: 0; width: 100%; height: 2px; background: #6366f1; transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left center; border-radius: 1px; }
.lp-nav-links a { position: relative; display: inline-block; }
.lp-nav-links a:hover .nav-underline { transform: scaleX(1); }
/* Ripple Effect */
.ripple-effect { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); pointer-events: none; animation: rippleAnim 0.6s ease-out forwards; z-index: 2; }
/* Button & Card base relative for ripple */
.lp-btn, .lp-role-card, .lp-inst-card, .lp-f-card, .lp-ai-card, .lp-b-card, .lp-pricing-card { position: relative; overflow: hidden; }
/* Loading Skeleton */
.skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px; color: transparent !important; user-select: none; }
/* Toast */
.toast { animation: toastSlide 0.35s ease-out; }
/* Modal Zoom */
.modal-overlay, .login-modal { animation: modalZoom 0.3s ease-out; }
/* Input Focus */
.input-focused { position: relative; }
.input-focused::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid #6366f1; opacity: 0.5; pointer-events: none; animation: pulseGlow 2s ease-in-out infinite; }
/* FAQ Accordion */
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease; padding: 0 16px; opacity: 0; }
.lp-faq-item.open .lp-faq-a { max-height: 600px; padding: 0 16px 16px; opacity: 1; }
.lp-faq-q { cursor: pointer; user-select: none; }
.lp-faq-q svg, .lp-faq-q i.chevron { transition: transform 0.3s ease; }
.lp-faq-item.open .lp-faq-q svg, .lp-faq-item.open .lp-faq-q i.chevron { transform: rotate(180deg); }
/* AI Pulse Ring */
.ai-pulse-ring { width: 60px; height: 60px; border-radius: 50%; background: rgba(99,102,241,0.1); animation: pulseGlow 3s ease-in-out infinite; position: absolute; }
/* Onboarding */
.onboard-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,0.6); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease; overflow-y: auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.onboard-modal { background: #fff; border-radius: 24px; max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 120px rgba(0,0,0,0.15); animation: onboardSlide 0.4s ease; }
@keyframes onboardSlide { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.onboard-body { padding: 40px 36px; }
.onboard-step { display: none; }
.onboard-step.active { display: block; animation: onboardSlide 0.35s ease; }
.onboard-title { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0 0 6px; letter-spacing: -0.03em; }
.onboard-sub { font-size: 14px; color: #64748b; margin: 0 0 28px; line-height: 1.5; }
.onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.onboard-card { border: 2px solid #e2e8f0; border-radius: 18px; padding: 22px 18px; cursor: pointer; transition: all 0.25s ease; background: #fff; position: relative; overflow: hidden; }
.onboard-card:hover { border-color: #c7d2fe; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(99,102,241,0.08); }
.onboard-card.selected { border-color: #6366f1; background: linear-gradient(135deg,#f5f3ff,#eef2ff); box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 8px 24px rgba(99,102,241,0.1); }
.onboard-card-icon { font-size: 28px; margin-bottom: 8px; display: block; }
.onboard-card-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.onboard-card-desc { font-size: 12px; color: #64748b; line-height: 1.5; }
.onboard-card-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; background: #fff; }
.onboard-card.selected .onboard-card-check { background: #6366f1; border-color: #6366f1; }
.onboard-card-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity 0.2s; }
.onboard-card.selected .onboard-card-check svg { opacity: 1; }
.onboard-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.onboard-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,0.25); }
.onboard-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
.onboard-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.onboard-btn-secondary { background: #f1f5f9; color: #475569; }
.onboard-btn-secondary:hover { background: #e2e8f0; }
.onboard-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.onboard-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.onboard-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onboard-field { display: flex; flex-direction: column; gap: 5px; }
.onboard-field label { font-size: 13px; font-weight: 600; color: #334155; }
.onboard-field input, .onboard-field select { padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 14px; color: #0f172a; background: #fff; transition: all 0.2s; outline: none; font-family: inherit; }
.onboard-field input:focus, .onboard-field select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.onboard-field input::placeholder { color: #94a3b8; }
.onboard-field .field-note { font-size: 11px; color: #94a3b8; margin-top: 2px; }
/* Loading Step */
.onboard-loading { text-align: center; padding: 40px 20px; }
.onboard-loading-icon { font-size: 48px; margin-bottom: 16px; animation: onboardBounce 1.2s ease infinite; }
@keyframes onboardBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.onboard-loading-title { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.onboard-loading-sub { font-size: 14px; color: #64748b; margin-bottom: 24px; }
.onboard-progress { max-width: 320px; margin: 0 auto; }
.onboard-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.onboard-progress-fill { height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 3px; transition: width 0.5s ease; width: 0; }
.onboard-progress-label { font-size: 13px; color: #64748b; }
/* Success step */
.onboard-success { text-align: center; padding: 40px 20px; }
.onboard-success-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#dcfce7,#bbf7d0); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: onboardScale 0.5s ease; }
@keyframes onboardScale { from { transform: scale(0); } to { transform: scale(1); } }
.onboard-success-icon svg { width: 32px; height: 32px; color: #16a34a; }
.onboard-success-title { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.onboard-success-sub { font-size: 14px; color: #64748b; margin-bottom: 24px; }
@media (max-width: 640px) {
.onboard-body { padding: 28px 20px; }
.onboard-grid { grid-template-columns: 1fr; gap: 10px; }
.onboard-title { font-size: 22px; }
.onboard-form-row { grid-template-columns: 1fr; }
.onboard-actions { flex-direction: column; }
.onboard-btn { width: 100%; justify-content: center; }
}
/* Reduced Motion */
.rm * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.rm .grad-orb { display: none; }
.rm .particles-canvas { display: none; }
.rm .cg-dot, .rm .cg-ring { display: none; }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Error Overlay */
.error-modal { background: var(--surface-1); border-radius: 16px; padding: 2.5rem 2rem; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 25px 80px rgba(0,0,0,0.2); animation: fadeSlideIn 0.3s ease; }
.error-icon { font-size: 3rem; color: var(--text-danger); margin-bottom: 1rem; }
.error-icon .ti-cloud-off { display: inline-block; }
.error-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.error-message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.5rem; }
.error-actions { display: flex; gap: 10px; justify-content: center; }
:root {
--bg: #eef0f6;
--surface-1: #ffffff;
--surface-2: #f5f6fa;
--text-primary: #1a1c2e;
--text-secondary: #5b5d72;
--text-muted: #9598ad;
--text-success: #16a34a;
--text-danger: #dc2626;
--text-warning: #ca8a04;
--text-accent: #2563eb;
--bg-success: #dcfce7;
--bg-danger: #fee2e2;
--bg-warning: #fef9c3;
--bg-accent: #dbeafe;
--accent: #2563eb;
--accent-light: #eef2ff;
--border: #e2e4eb;
--border-strong: #c6c9d4;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text-primary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
body.show-dashboard {
display: flex;
justify-content: center;
padding: 1rem;
}
body.show-landing {
display: block;
padding: 0;
background: #fff;
}
body.show-landing #app-section { display: none !important; }
body.show-dashboard #landing-section { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dashboard { width: 100%; max-width: 1200px; }
.grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
background: var(--surface-1);
border-radius: var(--radius-lg);
min-height: 600px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.sidebar {
background: var(--surface-1);
padding: 1.5rem 0.75rem;
display: flex;
flex-direction: column;
gap: 2px;
border-right: 1px solid var(--border);
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
margin-bottom: 1.75rem;
}
.brand-icon {
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.brand-icon i { font-size: 16px; color: #fff; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.navBtn {
display: flex;
align-items: center;
gap: 10px;
border: none;
background: none;
text-align: left;
padding: 10px 12px;
font-size: 13px;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-secondary);
transition: var(--transition);
font-family: inherit;
font-weight: 450;
}
.navBtn:hover { background: var(--surface-2); color: var(--text-primary); }
.navBtn.active {
background: var(--bg-accent);
color: var(--text-accent);
font-weight: 500;
box-shadow: inset 3px 0 0 var(--text-accent);
}
.navBtn i { font-size: 17px; width: 20px; text-align: center; }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:12px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.sidebar-user-avatar { width:38px; height:38px; border-radius:50%; background:var(--bg-accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:var(--text-accent); flex-shrink:0; }
.sidebar-user-info { min-width:0; }
.sidebar-user-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role { font-size:11px; color:var(--text-accent); }
.sidebar-user-school { font-size:10px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navBtn[data-perm] { transition: opacity 0.2s, max-height 0.3s; }
.navBtn[style*="display:none"] { display: none !important; }
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 12px 12px 4px; font-weight: 600; }
.divider { height: 1px; background: var(--border); margin: 12px 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; }
.status-dot.online { background: var(--text-success); }
.main { padding: 1.5rem 1.75rem; background: var(--surface-2); }
.panel { display: none; animation: fadeSlideIn 0.3s ease; }
.panel.active { display: block; }
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.panel-title { font-size: 17px; font-weight: 600; margin: 0 0 1.25rem; letter-spacing: -0.3px; }
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
margin-bottom: 1.25rem;
}
.stat-card {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
border: 1px solid var(--border);
transition: var(--transition);
}
.stat-card:hover {
box-shadow: var(--shadow-sm);
border-color: var(--border-strong);
}
.stat-label { font-size: 12px; color: var(--text-muted); margin: 0 0 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-value { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.5px; }
.card {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 1.1rem;
border: 1px solid var(--border);
transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-sm); }
.chart-wrap { position: relative; width: 100%; height: 180px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
text-align: left;
padding: 12px 14px;
font-weight: 500;
color: var(--text-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-accent);
color: var(--text-accent);
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
flex-shrink: 0;
}
.name-cell { display: flex; align-items: center; gap: 10px; }
.badge {
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
display: inline-block;
font-weight: 500;
}
.badge-success { background: var(--bg-success); color: var(--text-success); }
.badge-danger { background: var(--bg-danger); color: var(--text-danger); }
.badge-warning { background: var(--bg-warning); color: var(--text-warning); }
.badge-secondary { background: var(--surface-2); color: var(--text-muted); }
.badge-info { background: var(--bg-accent); color: var(--text-accent); }
.badge-primary { background: #6366f1; color: #fff; }
.badge-admin { background: #f59e0b; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.modal-input { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px; font-size:13px; background:var(--surface-1); color:var(--text-primary); box-sizing:border-box; }
.modal-input:focus { outline:none; border-color:var(--text-accent); box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.form-group { margin-bottom:0.75rem; }
.form-group label { display:block; font-size:13px; font-weight:500; margin-bottom:4px; color:var(--text-secondary); }
.class-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px;
margin-bottom: 1.25rem;
}
.class-box {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 1rem 0.6rem;
text-align: center;
cursor: pointer;
border: 1.5px solid transparent;
transition: var(--transition);
}
.class-box:hover {
border-color: var(--text-accent);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(37,99,235,0.15);
}
.class-box.active {
background: var(--bg-accent);
border-color: var(--text-accent);
box-shadow: 0 2px 12px rgba(37,99,235,0.12);
}
.class-box .count { font-size: 13px; font-weight: 500; color: var(--text-muted); margin: 0 0 2px; }
.class-box .label { font-size: 17px; font-weight: 700; margin: 0; }
.class-box.all .count { color: var(--text-accent); }
.class-box.g1 { border-left: 4px solid #ef4444; }
.class-box.g2 { border-left: 4px solid #f97316; }
.class-box.g3 { border-left: 4px solid #eab308; }
.class-box.g4 { border-left: 4px solid #22c55e; }
.class-box.g5 { border-left: 4px solid #14b8a6; }
.class-box.g6 { border-left: 4px solid #3b82f6; }
.class-box.g7 { border-left: 4px solid #a855f7; }
.class-box.g8 { border-left: 4px solid #8b5cf6; }
.class-box.g9 { border-left: 4px solid #64748b; }
.class-box.g10 { border-left: 4px solid #1e293b; }
.student-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.upload-box {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 1rem;
margin-bottom: 1.25rem;
border: 2px dashed var(--border-strong);
display: flex;
align-items: center;
gap: 12px;
transition: var(--transition);
}
.upload-box:hover { border-color: var(--text-accent); background: var(--bg-accent); }
.upload-box i { font-size: 24px; color: var(--text-muted); }
.upload-text { flex: 1; }
.upload-text p:first-child { font-size: 13px; font-weight: 500; margin: 0; }
.upload-text p:last-child { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.btn {
padding: 7px 18px;
border-radius: var(--radius-sm);
border: none;
font-size: 13px;
cursor: pointer;
font-family: inherit;
font-weight: 500;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 5px;
}
.btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); box-shadow: 0 4px 12px rgba(37,99,235,0.35); transform: translateY(-1px); }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-cat-active { background: var(--text-accent); color: #fff; }
.btn-ghost { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-outline {
background: var(--surface-1);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.btn-outline:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-danger { background: var(--bg-danger); color: var(--text-danger); }
.btn-danger:hover { background: #fecaca; }
.toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.toolbar select, .toolbar input {
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--surface-1);
font-family: inherit;
color: var(--text-primary);
transition: var(--transition);
}
.toolbar select:focus, .toolbar input:focus {
outline: none;
border-color: var(--text-accent);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
/* Advanced setup loading animation */
.setup-loader {
text-align: center;
padding: 2rem 0.5rem;
}
.setup-loader-glow {
width: 72px; height: 72px;
margin: 0 auto 1.5rem;
position: relative;
}
.setup-loader-glow::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--primary), #6366f1, #a855f7, var(--primary));
animation: spin 1.2s linear infinite;
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.setup-loader-glow::after {
content: '';
position: absolute;
inset: -16px;
border-radius: 50%;
background: conic-gradient(from 90deg, transparent, rgba(99,102,241,0.15));
animation: spin 2s linear infinite reverse;
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.setup-loader-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
z-index: 1;
animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(1.3); transform: scale(1.1); }
}
.setup-loader-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 0.25rem;
background: linear-gradient(135deg, var(--text-primary), var(--primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.setup-loader-status {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 1.5rem;
min-height: 1.4em;
}
.setup-loader-bar {
width: 240px;
height: 3px;
margin: 0 auto;
background: var(--border-color);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.setup-loader-bar-fill {
height: 100%;
width: 0%;
border-radius: 4px;
background: linear-gradient(90deg, var(--primary), #6366f1, #a855f7);
transition: width 0.5s ease;
}
.setup-loader-bar-glow {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--surface-1);
border-radius: var(--radius-lg);
width: 90%;
max-width: 420px;
max-height: 90vh;
box-shadow: var(--shadow-lg);
animation: slideUp 0.25s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem 0.75rem;
flex-shrink: 0;
}
.modal-header h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.modal-close-btn {
background: none;
border: none;
font-size: 22px;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.modal-close-btn:hover { color: var(--text-primary); }
.modal-body {
padding: 0 1.5rem 1rem;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 0.75rem 1.5rem 1.25rem;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
/* Wide modal variant for large forms */
.modal-wide { max-width: 960px; }
/* Form grid: 2 columns on desktop, 1 on mobile */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-grid > .form-group[style*="grid-column"] {
grid-column: 1 / -1;
}
/* Wide modal variant for large forms */
.modal-wide { max-width: 960px; }
@media (max-width: 768px) {
.modal-wide { max-width: 95%; }
.form-grid { grid-template-columns: 1fr; }
/* Extra permissions section in user modal */
.uf-extra-section { margin-top:8px; border-top:1px solid var(--border); padding-top:10px; }
.uf-extra-section .uf-extra-perm-cb { margin:0; }
}
@media (max-width: 480px) {
.modal-body { padding: 0 0.75rem 0.75rem; }
.modal-header { padding: 0.75rem 0.75rem 0.5rem; }
.modal-footer { padding: 0.5rem 0.75rem 0.75rem; }
}
/* ===== SETUP PANEL ===== */
.setup-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
background: var(--surface-1);
border-radius: var(--radius-md);
border: 1px solid var(--border);
min-height: 500px;
}
.setup-nav {
background: var(--surface-2);
border-right: 1px solid var(--border);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.setup-nav-btn {
display: flex;
align-items: center;
gap: 10px;
border: none;
background: none;
text-align: left;
padding: 10px 12px;
font-size: 13px;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-secondary);
transition: var(--transition);
font-family: inherit;
font-weight: 450;
width: 100%;
}
.setup-nav-btn:hover { background: var(--surface-1); color: var(--text-primary); }
.setup-nav-btn.active {
background: var(--bg-accent);
color: var(--text-accent);
font-weight: 500;
box-shadow: inset 3px 0 0 var(--text-accent);
}
.setup-nav-btn i { font-size: 16px; width: 18px; text-align: center; }
.setup-content {
padding: 20px 24px;
min-height: 400px;
}
.setup-section { display: none; }
.setup-section.active { display: block; }
.setup-section-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 6px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.setup-section-desc {
font-size: 12px;
color: var(--text-muted);
margin: 0 0 1.25rem;
}
.setup-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.setup-status {
font-size: 12px;
margin-top: 8px;
min-height: 18px;
}
.setup-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.setup-table thead th {
text-align: left;
padding: 8px 10px;
font-weight: 500;
color: var(--text-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.setup-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
/* === Fee Structure Builder === */
.fee-sub-nav {
display: flex; gap: 4px; margin-bottom: 20px;
background: var(--surface-1); border-radius: var(--radius-md); padding: 4px;
border: 1px solid var(--border); overflow-x: auto;
}
.fee-sub-btn {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px; border: none; border-radius: var(--radius-sm);
background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500;
cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.fee-sub-btn:hover { background: var(--surface-2); color: var(--text); }
.fee-sub-btn.active { background: var(--accent); color: #fff; }
.fee-sub-panel { display: none; animation: fadeIn 0.2s ease; }
.fee-sub-panel.active { display: block; }
.fee-type-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 20px 32px; border: 2px solid var(--border); border-radius: var(--radius-md);
cursor: pointer; transition: all 0.15s; min-width: 180px;
background: var(--bg-card);
}
.fee-type-card:hover { border-color: var(--accent); background: var(--surface-1); }
.fee-type-card.selected { border-color: var(--accent); background: #eef2ff; }
.fee-type-icon { font-size: 28px; color: var(--accent); }
.fee-type-label { font-size: 14px; font-weight: 600; }
.fee-type-desc { font-size: 11px; color: var(--text-muted); text-align: center; }
.term-fee-row {
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
padding: 8px 12px; background: var(--surface-1); border-radius: var(--radius-sm);
}
.transport-slab-row {
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
padding: 8px 12px; background: var(--surface-1); border-radius: var(--radius-sm);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fs-component-card {
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px;
margin-bottom: 12px; background: var(--bg-card);
transition: box-shadow 0.2s;
}
.fs-component-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.fs-component-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.fs-component-title {
font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.fs-component-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.fs-slab-row {
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.fs-slab-row input { flex: 1; }
.fs-class-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500;
background: var(--surface-2); color: var(--text-secondary); cursor: pointer;
border: 1px solid var(--border); transition: all 0.15s;
}
.fs-class-badge.selected { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.fs-class-badge.configured { border-color: #86efac; }
.fs-class-badge i { font-size: 12px; }
.fs-installment-row {
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
background: var(--surface-1); padding: 8px 12px; border-radius: var(--radius-sm);
}
.fs-installment-row input[type="text"] { flex: 1; }
.fs-installment-row input[type="number"] { width: 120px; }
.fs-month-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.fs-month-item {
display: flex; align-items: center; gap: 6px;
background: var(--surface-1); padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 12px;
}
.fs-month-item label { flex: 1; font-weight: 500; }
.fs-month-item input { width: 100px; }
@media (max-width:768px) {
.fs-component-grid { grid-template-columns: 1fr; }
.fs-month-grid { grid-template-columns: 1fr 1fr; }
}
/* Theme mode selector */
.theme-mode-btn {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
transition: var(--transition);
}
.theme-mode-btn:hover { border-color: var(--text-accent); }
.theme-mode-btn input { display: none; }
.theme-mode-btn:has(input:checked) {
background: var(--bg-accent);
border-color: var(--text-accent);
color: var(--text-accent);
font-weight: 500;
}
/* Accent swatch */
.accent-swatch {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: var(--transition);
}
.accent-swatch input { display: none; }
.accent-swatch:has(input:checked) { border-color: var(--text-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text-primary); }
.accent-swatch:hover { transform: scale(1.1); }
/* Fee category row */
.fee-cat-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
padding: 8px 10px;
background: var(--surface-2);
border-radius: 8px;
}
/* Responsive */
@media (max-width: 900px) {
.setup-layout { grid-template-columns: 1fr; }
.setup-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow-x: auto; padding: 8px; }
.setup-nav-btn { white-space: nowrap; font-size: 12px; padding: 6px 10px; }
.setup-content { padding: 16px; }
.setup-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.setup-nav-btn { font-size: 11px; padding: 5px 8px; }
.setup-content { padding: 12px; }
}
/* Fee Detail Modal */
.fee-modal {
max-width: 1400px;
width: 92vw;
padding: 0;
overflow: hidden;
border-radius: 24px;
height: 92vh;
max-height: 92vh;
display: flex;
flex-direction: column;
background: #F8FAFC;
box-shadow: 0 25px 80px rgba(0,0,0,0.18);
animation: feeFadeIn 0.3s ease;
}
@keyframes feeFadeIn {
from { opacity: 0; transform: scale(0.96) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
#feeDetailModal.modal-overlay {
background: rgba(15,23,42,0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.fee-modal-header {
flex-shrink: 0;
padding: 0;
border-bottom: 1px solid #E5E7EB;
background: #fff;
position: sticky;
top: 0;
z-index: 3;
}
.fee-modal-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
padding: 1.5rem 2rem;
background: #F8FAFC;
}
.fee-modal-scroll::-webkit-scrollbar { width: 5px; }
.fee-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.fee-modal-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
.fee-modal-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.fee-modal-footer {
flex-shrink: 0;
padding: 1rem 2rem;
background: #fff;
border-top: 1px solid #E5E7EB;
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
position: sticky;
bottom: 0;
z-index: 3;
}
/* ===== ERP PREMIUM FEE DETAIL MODAL ===== */
/* Student Info Bar */
.fep-header {
display: flex;
align-items: stretch;
gap: 0;
background: #fff;
border-bottom: 1px solid #E5E7EB;
padding: 0;
position: relative;
}
.fep-header-left {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
min-width: 260px;
background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%);
border-right: 1px solid #E5E7EB;
}
.fep-avatar {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(99,102,241,0.2);
}
.fep-student-name {
font-size: 16px;
font-weight: 700;
color: #0F172A;
line-height: 1.2;
}
.fep-student-meta-row {
display: flex;
flex-wrap: wrap;
gap: 2px 16px;
margin-top: 2px;
}
.fep-student-meta-row span {
font-size: 11px;
color: #64748B;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.fep-student-meta-row span i { font-size: 12px; color: #94A3B8; }
.fep-header-right {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0;
padding: 8px 16px;
align-content: center;
background: #fff;
}
.fep-info-cell {
display: flex;
flex-direction: column;
padding: 4px 10px;
border-right: 1px solid #F1F5F9;
}
.fep-info-cell:last-child { border-right: none; }
.fep-info-cell .fep-ic-label {
font-size: 9px;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 500;
}
.fep-info-cell .fep-ic-value {
font-size: 12px;
font-weight: 600;
color: #1E293B;
margin-top: 1px;
}
/* ===== SUMMARY CARDS ===== */
.fep-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.fep-summary-card {
background: #fff;
border-radius: 12px;
padding: 14px 16px;
border: 1px solid #E5E7EB;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s;
}
.fep-summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.fep-summary-card .fep-sc-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.fep-summary-card .fep-sc-info { flex: 1; min-width: 0; }
.fep-summary-card .fep-sc-label {
font-size: 10px;
color: #94A3B8;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.fep-summary-card .fep-sc-value {
font-size: 20px;
font-weight: 700;
color: #0F172A;
line-height: 1.2;
margin-top: 2px;
}
.fep-summary-card .fep-sc-sub {
font-size: 11px;
color: #94A3B8;
margin-top: 1px;
}
/* ===== TWO-COLUMN MAIN ===== */
.fep-main {
display: grid;
grid-template-columns: 1fr 300px;
gap: 16px;
align-items: start;
}
.fep-left { display: flex; flex-direction: column; gap: 14px; }
.fep-right { display: flex; flex-direction: column; gap: 14px; }
/* ===== PAYMENT SCHEDULE CARDS ===== */
.fep-schedule {
background: #fff;
border-radius: 14px;
border: 1px solid #E5E7EB;
overflow: hidden;
}
.fep-schedule-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
background: #FAFBFC;
}
.fep-schedule-header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.fep-schedule-header .fep-count-badge {
font-size: 11px;
color: #64748B;
background: #F1F5F9;
padding: 2px 10px;
border-radius: 12px;
font-weight: 500;
}
.fep-schedule-body {
display: flex;
flex-direction: column;
}
/* ===== PAYMENT SCHEDULE SECTIONS ===== */
.fep-schedule-body {
padding: 0;
display: flex;
flex-direction: column;
}
.fep-sc-section {
background: #fff;
border-bottom: 1px solid #E5E7EB;
padding: 14px 14px 10px;
}
.fep-sc-section:last-child { border-bottom: none; }
.fep-sc-section-hd {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #F1F5F9;
}
.fep-sc-section-hd i { font-size: 14px; }
.fep-sc-count {
margin-left: auto;
font-size: 10px;
color: #94A3B8;
background: #F1F5F9;
padding: 1px 8px;
border-radius: 8px;
font-weight: 500;
}
/* Card grid: 4 cols desktop */
.fep-sc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
/* ===== INDIVIDUAL PAYMENT CARD ===== */
.fep-sc-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
border: 1px solid #E5E7EB;
padding: 12px;
transition: all 0.25s;
animation: fepScIn 0.35s ease both;
position: relative;
}
@keyframes fepScIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fep-sc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
/* Status colors */
.fep-sc-paid { border-left: 3px solid #16A34A; background: #FAFFFB; }
.fep-sc-partial { border-left: 3px solid #D97706; background: #FFFCF5; }
.fep-sc-pending { border-left: 3px solid #DC2626; background: #FFFAFA; }
/* Top row: icon + badge */
.fep-sc-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.fep-sc-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.fep-sc-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 10px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
.fep-sc-badge.paid { background: #DCFCE7; color: #16A34A; }
.fep-sc-badge.partial { background: #FEF3C7; color: #D97706; }
.fep-sc-badge.pending { background: #FEE2E2; color: #DC2626; }
.fep-sc-badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
.fep-sc-badge.paid::before { background: #16A34A; }
.fep-sc-badge.partial::before { background: #D97706; }
.fep-sc-badge.pending::before { background: #DC2626; }
/* Fee name + period */
.fep-sc-name { font-size: 13px; font-weight: 700; color: #0F172A; line-height: 1.2; }
.fep-sc-period { font-size: 10px; color: #64748B; margin-top: 1px; margin-bottom: 8px; }
/* Details grid */
.fep-sc-details {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 8px;
}
.fep-sc-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.fep-sc-lbl { color: #94A3B8; }
.fep-sc-val { font-weight: 600; color: #334155; }
/* Footer */
.fep-sc-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid #F1F5F9;
}
.fep-sc-receipt { font-size: 10px; color: #94A3B8; font-family: monospace; }
.fep-sc-pay {
padding: 5px 12px;
border-radius: 6px;
border: none;
font-size: 11px;
font-weight: 600;
cursor: pointer;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: #fff;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s;
}
.fep-sc-pay:hover { box-shadow: 0 3px 12px rgba(99,102,241,0.3); transform: translateY(-1px); }
.fep-sc-pay:active { transform: scale(0.96); }
.fep-sc-receipt-btn {
padding: 5px 10px;
border-radius: 6px;
border: 1px solid #E5E7EB;
background: #fff;
color: #475569;
font-size: 10px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 3px;
transition: all 0.15s;
}
.fep-sc-receipt-btn:hover { background: #F8FAFC; border-color: #CBD5E1; }
/* ===== PAYMENT HISTORY / TRANSACTION LIST ===== */
.fep-history {
background: #fff;
border-radius: 14px;
border: 1px solid #E5E7EB;
overflow: hidden;
}
.fep-history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
background: #FAFBFC;
}
.fep-history-header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.fep-tx-list { display: flex; flex-direction: column; }
.fep-tx-item {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 80px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid #F1F5F9;
transition: background 0.15s;
font-size: 12px;
}
.fep-tx-item:last-child { border-bottom: none; }
.fep-tx-item:hover { background: #F8FAFC; }
.fep-tx-item.fep-tx-head {
background: #F8FAFC;
font-size: 10px;
font-weight: 600;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 8px 16px;
border-bottom: 1px solid #E5E7EB;
}
.fep-tx-item .fep-tx-receipt { font-family: monospace; font-weight: 600; color: #0F172A; font-size: 11px; }
.fep-tx-item .fep-tx-amount { font-weight: 600; color: #16A34A; }
.fep-tx-item .fep-tx-date { color: #64748B; font-size: 11px; }
.fep-tx-item .fep-tx-mode { color: #475569; font-size: 11px; text-transform: capitalize; }
.fep-tx-item .fep-tx-by { color: #64748B; font-size: 11px; }
.fep-tx-empty {
text-align: center;
padding: 24px 16px;
color: #94A3B8;
font-size: 12px;
}
.fep-tx-empty i { font-size: 28px; display: block; margin-bottom: 6px; color: #CBD5E1; }
/* ===== RIGHT PANEL CARDS ===== */
.fep-pending-card {
background: #fff;
border-radius: 14px;
border: 1px solid #E5E7EB;
padding: 16px;
border-left: 4px solid #DC2626;
}
.fep-pending-card .fep-pc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.fep-pending-card .fep-pc-header h4 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.fep-pending-card .fep-pc-total {
font-size: 22px;
font-weight: 800;
color: #DC2626;
letter-spacing: -0.3px;
}
.fep-pc-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.fep-pc-metric {
background: #FAFBFC;
border-radius: 10px;
padding: 10px 12px;
border: 1px solid #F1F5F9;
}
.fep-pc-metric .fep-pc-m-label {
font-size: 10px;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 500;
}
.fep-pc-metric .fep-pc-m-value {
font-size: 15px;
font-weight: 700;
color: #0F172A;
margin-top: 2px;
}
.fep-pc-metric .fep-pc-m-value.red { color: #DC2626; }
.fep-pc-metric .fep-pc-m-value.amber { color: #D97706; }
.fep-pc-metric .fep-pc-m-value.green { color: #16A34A; }
.fep-pc-list {
max-height: 200px;
overflow-y: auto;
margin-bottom: 12px;
}
.fep-pc-list::-webkit-scrollbar { width: 3px; }
.fep-pc-list::-webkit-scrollbar-track { background: transparent; }
.fep-pc-list::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
.fep-pc-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 8px;
margin-bottom: 6px;
background: #FAFBFC;
border: 1px solid #F1F5F9;
font-size: 12px;
transition: all 0.15s;
}
.fep-pc-item:hover { border-color: #C7D2FE; }
.fep-pc-item.fep-pc-overdue { background: #FFF5F5; border-color: #FECACA; }
.fep-pc-item .fep-pc-i-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.fep-pc-item .fep-pc-i-icon {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.fep-pc-item .fep-pc-i-icon.ii-indigo { background: #EEF2FF; color: #4F46E5; }
.fep-pc-item .fep-pc-i-icon.ii-amber { background: #FEF3C7; color: #D97706; }
.fep-pc-item .fep-pc-i-icon.ii-rose { background: #FEE2E2; color: #DC2626; }
.fep-pc-item .fep-pc-i-name { font-weight: 600; color: #0F172A; font-size: 12px; }
.fep-pc-item .fep-pc-i-period { font-size: 10px; color: #94A3B8; }
.fep-pc-item .fep-pc-i-amount { font-weight: 700; color: #D97706; font-size: 13px; flex-shrink: 0; margin-left: 8px; }
.fep-pc-item .fep-pc-i-amount.overdue-amt { color: #DC2626; }
.fep-pc-item .fep-pc-i-pay {
padding: 3px 8px;
border-radius: 5px;
border: none;
font-size: 10px;
font-weight: 600;
cursor: pointer;
background: #6366F1;
color: #fff;
flex-shrink: 0;
margin-left: 6px;
transition: all 0.15s;
}
.fep-pc-item .fep-pc-i-pay:hover { background: #4F46E5; }
.fep-pc-collect-all {
width: 100%;
padding: 10px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.2s;
}
.fep-pc-collect-all:hover { box-shadow: 0 4px 16px rgba(99,102,241,0.3); transform: translateY(-1px); }
/* Progress Card */
.fep-progress-card {
background: #fff;
border-radius: 14px;
border: 1px solid #E5E7EB;
padding: 16px;
}
.fep-progress-card h4 {
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.fep-progress-ring-wrap {
display: flex;
align-items: center;
gap: 16px;
}
.fep-progress-ring {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.fep-progress-ring svg { transform: rotate(-90deg); }
.fep-progress-ring .pr-bg { fill: none; stroke: #F1F5F9; stroke-width: 7; }
.fep-progress-ring .pr-fg {
fill: none;
stroke: #6366F1;
stroke-width: 7;
stroke-linecap: round;
transition: stroke-dashoffset 1s ease;
}
.fep-progress-ring .pr-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fep-progress-ring .pr-center .pr-pct { font-size: 18px; font-weight: 700; color: #0F172A; line-height: 1; }
.fep-progress-ring .pr-center .pr-label { font-size: 9px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.3px; }
.fep-progress-details { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fep-progress-details .fep-pd-row { display: flex; justify-content: space-between; font-size: 12px; }
.fep-progress-details .fep-pd-row .fep-pd-label { color: #64748B; }
.fep-progress-details .fep-pd-row .fep-pd-value { font-weight: 600; color: #0F172A; }
.fep-progress-details .fep-pd-row .fep-pd-value.green { color: #16A34A; }
.fep-progress-details .fep-pd-row .fep-pd-value.red { color: #DC2626; }
/* Quick Stats Card */
.fep-stats-card {
background: #fff;
border-radius: 14px;
border: 1px solid #E5E7EB;
padding: 16px;
}
.fep-stats-card h4 {
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.fep-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.fep-stat-box {
background: #FAFBFC;
border-radius: 8px;
padding: 10px 12px;
border: 1px solid #F1F5F9;
}
.fep-stat-box .fep-sb-label {
font-size: 9px;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 500;
}
.fep-stat-box .fep-sb-value {
font-size: 15px;
font-weight: 700;
color: #0F172A;
margin-top: 1px;
}
.fep-stat-box .fep-sb-value.green { color: #16A34A; }
.fep-stat-box .fep-sb-value.orange { color: #D97706; }
.fep-stat-box .fep-sb-value.red { color: #DC2626; }
.fep-stat-box .fep-sb-value.blue { color: #2563EB; }
.fep-stat-box.fep-sb-wide { grid-column: 1 / -1; }
/* Empty State */
.fep-empty {
text-align: center;
padding: 40px 16px;
}
.fep-empty .fep-empty-icon { font-size: 48px; color: #CBD5E1; display: block; margin-bottom: 12px; }
.fep-empty h3 { font-size: 16px; font-weight: 600; color: #0F172A; margin: 0 0 6px; }
.fep-empty p { font-size: 12px; color: #94A3B8; margin: 0 0 16px; }
.fep-empty .btn { min-width: 160px; justify-content: center; }
/* Footer Actions */
.fep-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
background: #fff;
border-top: 1px solid #E5E7EB;
}
.fep-footer .btn {
padding: 8px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
cursor: pointer;
transition: all 0.15s;
min-height: 40px;
}
.fep-footer .btn-fep-primary { background: #6366F1; color: #fff; }
.fep-footer .btn-fep-primary:hover { background: #4F46E5; box-shadow: 0 4px 14px rgba(99,102,241,0.3); }
.fep-footer .btn-fep-success { background: #16A34A; color: #fff; }
.fep-footer .btn-fep-success:hover { background: #15803D; box-shadow: 0 4px 14px rgba(22,163,74,0.3); }
.fep-footer .btn-fep-outline { background: #fff; color: #475569; border: 1px solid #E5E7EB; }
.fep-footer .btn-fep-outline:hover { background: #F8FAFC; border-color: #CBD5E1; }
.fep-footer .btn-fep-close { background: transparent; color: #94A3B8; border: none; }
.fep-footer .btn-fep-close:hover { color: #475569; background: #F1F5F9; }
/* Responsive */
@media (max-width: 1024px) {
.fep-header-left { min-width: 200px; }
.fep-header-right { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.fep-main { grid-template-columns: 1fr 260px; gap: 12px; }
.fep-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
#feeDetailModal.modal-overlay { align-items: flex-end; }
.fee-modal { width: 100%; border-radius: 20px 20px 0 0; height: 95vh; max-height: 95vh; }
.fee-modal-scroll { padding: 12px 14px; }
.fee-modal-footer { padding: 10px 14px; }
.fep-header { flex-direction: column; }
.fep-header-left { min-width: auto; border-right: none; border-bottom: 1px solid #E5E7EB; padding: 12px 14px; }
.fep-header-right { grid-template-columns: 1fr 1fr; padding: 6px 10px; }
.fep-info-cell { padding: 3px 8px; }
.fep-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.fep-summary-card { padding: 10px 12px; }
.fep-summary-card .fep-sc-value { font-size: 16px; }
.fep-main { grid-template-columns: 1fr; gap: 12px; }
.fep-left { grid-column: 1; }
.fep-right { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fep-sc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fep-sc-section { padding: 10px 10px 6px; }
.fep-tx-item { grid-template-columns: 1fr 1fr 1fr 60px; }
.fep-tx-item .fep-tx-date, .fep-tx-item .fep-tx-by { display: none; }
.fep-tx-item.fep-tx-head .fep-tx-date, .fep-tx-item.fep-tx-head .fep-tx-by { display: none; }
.fep-pending-card { grid-column: 1 / -1; }
.fep-footer .btn { flex: 1; justify-content: center; font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 480px) {
.fee-modal { height: 100vh; max-height: 100vh; border-radius: 16px 16px 0 0; }
.fee-modal-scroll { padding: 10px 12px; }
.fee-modal-footer { padding: 8px 12px; }
.fep-header-left { padding: 10px 12px; }
.fep-header-right { grid-template-columns: 1fr; padding: 4px 8px; }
.fep-info-cell { padding: 2px 6px; }
.fep-summary { grid-template-columns: 1fr 1fr; gap: 6px; }
.fep-summary-card { padding: 8px 10px; gap: 8px; }
.fep-summary-card .fep-sc-icon { width: 32px; height: 32px; font-size: 14px; }
.fep-summary-card .fep-sc-value { font-size: 14px; }
.fep-main { gap: 10px; }
.fep-right { grid-template-columns: 1fr; }
.fep-sc-grid { grid-template-columns: 1fr; gap: 6px; }
.fep-sc-section { padding: 8px 8px 4px; }
.fep-sc-card { padding: 10px; }
.fep-sc-name { font-size: 12px; }
.fep-tx-item { grid-template-columns: 1fr 1fr 50px; font-size: 11px; padding: 8px 10px; }
.fep-tx-item .fep-tx-mode { display: none; }
.fep-tx-item.fep-tx-head .fep-tx-mode { display: none; }
.fep-footer { flex-wrap: wrap; }
.fep-footer .btn { font-size: 11px; padding: 6px 10px; min-height: 36px; }
.fep-student-name { font-size: 14px; }
.fep-avatar { width: 40px; height: 40px; font-size: 16px; }
}
/* Loading skeleton */
.fep-skeleton { padding: 20px; }
.fep-skeleton .sk-wrap { display: flex; flex-direction: column; gap: 14px; }
.fep-skeleton .sk-row { display: flex; gap: 14px; }
.fep-skeleton .sk-box { background: linear-gradient(90deg, #F1F5F9 25%, #E5E7EB 50%, #F1F5F9 75%); background-size: 200% 100%; border-radius: 10px; animation: skShimmer 1.5s infinite; }
@keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.form-group label {
display: block;
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
font-weight: 500;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: inherit;
background: var(--surface-1);
color: var(--text-primary);
transition: var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: var(--text-accent);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-group textarea { resize: vertical; min-height: 60px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; }
.notice-item {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.notice-item:last-child { border-bottom: none; }
.notice-item:hover { background: var(--surface-2); }
.notice-item h4 { font-size: 14px; margin: 0 0 4px; color: var(--text-primary); }
.notice-item p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.notice-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: flex; gap: 12px; }
.text-right { text-align: right; }
.text-success { color: var(--text-success); }
.text-danger { color: var(--text-danger); }
.empty-state { padding: 2.5rem; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Progress Dashboard */
.progress-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.progress-card {
background: var(--surface-1);
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 14px;
cursor: pointer;
transition: var(--transition);
}
.progress-card:hover {
box-shadow: var(--shadow-sm);
border-color: var(--border-strong);
transform: translateY(-2px);
}
.progress-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-card .name { font-weight: 600; font-size: 14px; }
.progress-card .cls-badge { font-size: 11px; padding: 2px 10px; border-radius: 20px; background: var(--bg-accent); color: var(--text-accent); font-weight: 500; }
.progress-card .scores { display: flex; gap: 12px; margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); }
.progress-card .scores span { display: flex; align-items: center; gap: 4px; }
.progress-card .overall { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 20px; display: inline-block; }
.progress-card .overall.excellent { background: var(--bg-success); color: var(--text-success); }
.progress-card .overall.average { background: var(--bg-warning); color: var(--text-warning); }
.progress-card .overall.needs { background: var(--bg-danger); color: var(--text-danger); }
.progress-card .mini-list { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.progress-card .mini-list div { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.progress-card .mini-list i { font-size: 12px; }
.progress-timeline { position: relative; }
.progress-timeline::before {
content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
width: 2px; background: var(--border);
}
.timeline-item {
position: relative; padding-left: 34px; padding-bottom: 16px;
}
.timeline-item::before {
content: ''; position: absolute; left: 7px; top: 4px;
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid var(--border-strong); background: var(--surface-1);
}
.timeline-item.academic::before { border-color: var(--text-accent); background: var(--bg-accent); }
.timeline-item.sports::before { border-color: var(--text-success); background: var(--bg-success); }
.timeline-item.competition::before { border-color: #f59e0b; background: #fef3c7; }
.timeline-item.activity::before { border-color: #8b5cf6; background: #ede9fe; }
.timeline-item .t-date { font-size: 11px; color: var(--text-muted); margin: 0 0 2px; }
.timeline-item .t-title { font-size: 13px; font-weight: 500; margin: 0; }
.timeline-item .t-desc { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }
.timeline-item .t-teacher { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
.timeline-item .t-badge { font-size: 10px; padding: 1px 8px; border-radius: 20px; display: inline-block; margin-top: 4px; }
.progress-stat-pill {
background: var(--surface-2); border-radius: 20px; padding: 6px 14px; font-size: 12px;
display: flex; align-items: center; gap: 6px; font-weight: 500;
}
.progress-stat-pill .num { font-size: 18px; font-weight: 700; }
@media (max-width: 700px) {
.progress-grid { grid-template-columns: 1fr; }
}
/* Fee Dashboard */
.fee-class-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.fee-class-card {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 12px;
border: 1px solid var(--border);
transition: var(--transition);
cursor: pointer;
}
.fee-class-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.fee-class-card .top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.fee-class-card .cls { font-size: 16px; font-weight: 700; }
.fee-class-card .cls-count { font-size: 11px; color: var(--text-muted); }
.fee-class-card .cls-bar {
height: 5px;
background: var(--surface-2);
border-radius: 4px;
overflow: hidden;
margin-bottom: 6px;
}
.fee-class-card .cls-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.fee-class-card .cls-amounts {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-muted);
}
.fee-class-card .cls-amounts span:first-child { color: var(--text-success); font-weight: 500; }
.fee-class-card .cls-fully { font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.fee-class-card .cls-fully strong { color: var(--text-primary); }
.fee-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 16px;
align-items: start;
}
.fee-left { min-width: 0; }
.fee-right { min-width: 0; }
.fee-recent-list {
background: var(--surface-1);
border-radius: var(--radius-md);
border: 1px solid var(--border);
max-height: 480px;
overflow-y: auto;
}
.fee-recent-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
font-size: 12px;
transition: var(--transition);
}
.fee-recent-item:last-child { border-bottom: none; }
.fee-recent-item:hover { background: var(--surface-2); }
.fee-recent-item .info { flex: 1; min-width: 0; }
.fee-recent-item .info .name { font-weight: 600; color: var(--text-primary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fee-recent-item .info .meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.fee-recent-item .amount { font-weight: 600; font-size: 13px; color: var(--text-success); white-space: nowrap; margin-left: 8px; }
.fee-recent-item .amount.due { color: var(--text-danger); }
.fee-recent-item .dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 8px;
}
.fee-recent-item .dot.paid { background: var(--text-success); }
.fee-recent-item .dot.pending { background: var(--text-danger); }
@media (max-width: 900px) {
.fee-layout { grid-template-columns: 1fr; }
.fee-right { order: -1; }
.fee-right { margin-bottom: 8px; }
.fee-class-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* Fee timeline animation */
.fee-streak {
background: linear-gradient(135deg, #bbf7d0, #dcfce7);
border: 1px solid var(--text-success);
animation: feeStreakIn 0.3s ease both;
}
.fee-connector {
width: 12px;
min-width: 12px;
height: 5px;
background: var(--text-success);
flex-shrink: 0;
border-radius: 3px;
animation: feeStreakIn 0.3s ease 0.1s both;
}
@keyframes feeStreakIn {
from { opacity: 0; transform: scaleY(0.7) scaleX(0.9); }
to { opacity: 1; transform: scaleY(1) scaleX(1); }
}
/* Staff Profile specific */
.profile-header {
display: flex;
gap: 1rem;
align-items: center;
padding: 1.25rem;
background: linear-gradient(135deg, #dbeafe, #eff6ff);
border-radius: var(--radius-md);
border: 1px solid var(--bg-accent);
position: relative;
overflow: hidden;
}
.profile-header::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
border-radius: 50%;
}
.profile-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(37,99,235,0.3);
position: relative;
z-index: 1;
}
.profile-info { flex: 1; position: relative; z-index: 1; }
.section-card {
background: var(--surface-1);
border-radius: var(--radius-md);
padding: 1rem;
border: 1px solid var(--border);
transition: var(--transition);
}
.section-card:hover { box-shadow: var(--shadow-sm); }
.section-title {
font-size: 13px;
font-weight: 600;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 6px;
color: var(--text-primary);
}
.section-title i { color: var(--text-accent); font-size: 15px; }
.action-bar {
background: linear-gradient(135deg, #dbeafe, #eff6ff);
border: 1px solid var(--bg-accent);
border-radius: var(--radius-md);
padding: 1rem;
}
.action-bar .btn { box-shadow: none; }
.stat-pill {
text-align: center;
background: var(--surface-2);
border-radius: var(--radius-sm);
padding: 8px 6px;
border: 1px solid var(--border);
}
.stat-pill-value { font-size: 18px; font-weight: 600; display: block; }
.stat-pill-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; }
/* ---------- Hamburger & Mobile Sidebar ---------- */
.hamburger {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 200;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface-1);
color: var(--text-primary);
font-size: 20px;
cursor: pointer;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.hamburger:hover { background: var(--surface-2); }
.close-sidebar { display: none; }
/* ---------- Mobile Top App Bar ---------- */
.m-topbar {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
z-index: 120;
background: var(--surface-1);
border-bottom: 1px solid var(--border);
align-items: center;
padding: 0 12px;
gap: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.m-topbar-hamburger {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; font-size: 22px;
color: var(--text-primary); cursor: pointer;
border-radius: 10px; transition: var(--transition);
}
.m-topbar-hamburger:hover { background: var(--surface-2); }
.m-topbar-brand {
flex: 1; font-size: 16px; font-weight: 700;
color: var(--text-primary); display: flex; align-items: center; gap: 8px;
letter-spacing: -0.3px;
}
.m-topbar-brand i { font-size: 20px; color: var(--text-accent); }
.m-topbar-right { display: flex; align-items: center; gap: 4px; }
.m-topbar-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; font-size: 20px;
color: var(--text-secondary); cursor: pointer;
border-radius: 10px; transition: var(--transition);
}
.m-topbar-icon:hover { background: var(--surface-2); color: var(--text-primary); }
.m-topbar-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--bg-accent); color: var(--text-accent);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; cursor: pointer;
flex-shrink: 0;
}
/* ---------- Mobile Bottom Navigation ---------- */
.m-bottom-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
height: 64px;
z-index: 120;
background: var(--surface-1);
border-top: 1px solid var(--border);
align-items: center;
justify-content: space-around;
padding: 0 4px;
box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.m-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: none;
border: none;
padding: 8px 12px;
min-width: 56px;
min-height: 44px;
cursor: pointer;
border-radius: 12px;
transition: var(--transition);
color: var(--text-muted);
font-family: inherit;
position: relative;
}
.m-nav-item i { font-size: 22px; transition: var(--transition); }
.m-nav-item span { font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }
.m-nav-item:hover { color: var(--text-accent); }
.m-nav-item.active {
color: var(--text-accent);
}
.m-nav-item.active i { font-weight: 700; }
.m-nav-item.active::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
border-radius: 0 0 4px 4px;
background: var(--text-accent);
}
/* ---------- Ripple effect ---------- */
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(37,99,235,0.15) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.ripple:active::after { opacity: 1; }
/* ===================================================================
RESPONSIVE — Mobile First (320px–767px), Tablet (768px–1023px), Desktop (1024px+)
=================================================================== */
/* ---- Tablet (768px – 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
.stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.dashboard { max-width: 100%; }
.main { padding: 1.25rem; }
.fee-layout { grid-template-columns: 1fr; }
.fee-right { order: -1; margin-bottom: 8px; }
.fee-class-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.progress-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.class-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.class-box { padding: 0.7rem 0.4rem; }
.class-box .label { font-size: 15px; }
.class-box .count { font-size: 11px; }
.stat-value { font-size: 20px; }
[style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
.chart-wrap { height: 140px; }
#holidayBanner { font-size: 13px !important; padding: 10px 14px !important; flex-wrap: wrap; }
#uploadProgressModal .modal { max-width: 95%; }
#uploadProgressModal .form-group input,
#uploadProgressModal .form-group select,
#uploadProgressModal .form-group textarea { font-size: 14px; }
}
/* ---- Tablet AND BELOW (max-width: 1023px) ---- */
@media (max-width: 1023px) {
.dashboard { max-width: 100%; border-radius: 0; }
.grid { border-radius: 0; border: none; }
body.show-dashboard { padding: 0; }
/* Hide desktop hamburger, show mobile top bar + bottom nav */
.hamburger { display: none !important; }
.m-topbar { display: flex; }
.m-bottom-nav { display: flex; }
.sidebar {
position: fixed;
top: 0;
left: -280px;
width: 260px;
height: 100vh;
z-index: 150;
flex-direction: column;
padding: 1rem 0.75rem;
padding-top: 0;
border-right: 1px solid var(--border);
border-bottom: none;
gap: 2px;
transition: left 0.25s cubic-bezier(0.4,0,0.2,1);
box-shadow: 4px 0 20px rgba(0,0,0,0.1);
overflow-y: auto;
}
.sidebar.open { left: 0; }
.sidebar .brand { padding-top: 12px; }
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: 140;
}
.sidebar-overlay.show { display: block; }
.close-sidebar {
display: flex;
margin-left: auto;
background: none;
border: none;
font-size: 18px;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
}
.close-sidebar:hover { color: var(--text-primary); }
.brand { margin-bottom: 1rem; }
.navBtn { font-size: 13px; padding: 10px 12px; }
.main { padding: 1rem; padding-top: 64px; padding-bottom: 72px; overflow: hidden; }
.panel { overflow: hidden; }
.panel-title { font-size: 16px; margin-bottom: 0.75rem; }
.stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { padding: 0.75rem; }
.stat-value { font-size: 20px; }
/* Tables */
.card { overflow-x: auto !important; }
table { font-size: 12px; }
thead th, td { padding: 8px 10px; }
/* Modals */
.modal { width: 95%; margin: 10px; padding: 0; max-height: 85vh; }
.modal-header { padding: 1rem 1rem 0.5rem; }
.modal-body { padding: 0 1rem 0.75rem; }
.modal-footer { padding: 0.5rem 1rem 1rem; }
.modal-overlay { align-items: flex-end; }
/* Profile modals */
.profile-header { flex-direction: column; text-align: center; padding: 1rem; }
.profile-header::before { display: none; }
.profile-avatar { width: 56px; height: 56px; font-size: 20px; }
.profile-info p { text-align: center; }
/* Fee timeline boxes */
.fee-layout { grid-template-columns: 1fr; }
.fee-right { order: -1; }
.fee-class-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* Progress */
.progress-grid { grid-template-columns: 1fr; }
.progress-card .mini-list { display: grid; grid-template-columns: 1fr 1fr; }
/* Dashboard grid - match both with and without space after colon */
[style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Charts */
.chart-wrap { height: 140px; }
/* Holiday banner */
#holidayBanner { font-size: 13px !important; padding: 10px 14px !important; flex-wrap: wrap; }
/* Upload modal */
#uploadProgressModal .modal { max-width: 95%; }
#uploadProgressModal .form-group input,
#uploadProgressModal .form-group select,
#uploadProgressModal .form-group textarea { font-size: 14px; }
/* Buttons: min 44px touch targets */
.btn, .btn-sm, .navBtn, .s-tab, .s-qa-btn, .m-nav-item { min-height: 44px; }
.toolbar input, .toolbar select { min-height: 44px; font-size: 15px; }
input, select, textarea, button { font-size: 16px; }
/* Fix s-grid-2 on tablet */
.s-grid-2 { grid-template-columns: 1fr !important; }
/* Student dashboard adjustments */
.s-dash-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.s-dash-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.s-dash-top { padding: 18px 20px; }
.s-dash-info-bar { flex-wrap: wrap; gap: 8px; }
.s-quick-actions { gap: 8px; }
.s-qa-btn { padding: 8px 14px; font-size: 0.78rem; }
/* AI Assistant on mobile */
.s-ai-panel { width: calc(100% - 32px); right: 16px; bottom: 80px; max-height: 50vh; }
.s-ai-fab { bottom: 80px; right: 16px; width: 48px; height: 48px; font-size: 1.2rem; }
}
/* ---- Mobile (320px – 767px) ---- */
@media (max-width: 767px) {
/* Typography - Mobile */
body { font-size: 15px; }
.panel-title { font-size: 18px; }
.stat-value { font-size: 22px; }
.stat-label { font-size: 11px; }
.main { padding: 0.75rem; padding-top: 60px; padding-bottom: 68px; }
/* Stats: 2 per row */
.stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-card { padding: 0.7rem; }
/* Toolbar */
.toolbar { flex-wrap: wrap; gap: 6px; }
.toolbar input, .toolbar select { width: 100%; }
/* Buttons */
.btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.btn-sm { min-height: 40px; padding: 6px 12px; font-size: 13px; }
/* Tables become cards on very small screens */
.card { overflow-x: auto !important; }
table { font-size: 11px; }
thead th, td { padding: 6px 8px; }
/* Modals slide up from bottom */
.modal { width: 100%; margin: 0; border-radius: 16px 16px 0 0; max-height: 90vh; }
.modal-overlay { align-items: flex-end; }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
/* Section cards */
.section-card { padding: 0.75rem; }
.action-bar .btn { font-size: 11px; padding: 4px 10px; }
.navBtn { font-size: 13px; padding: 10px 12px; }
/* Class grid */
.class-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.class-box { padding: 0.5rem 0.3rem; border-left-width: 3px; }
.class-box .label { font-size: 13px; }
.class-box .count { font-size: 10px; }
.fee-class-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
/* Student dashboard mobile */
.s-dash-grid { grid-template-columns: 1fr; gap: 12px; }
.s-dash-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.s-stat-card { padding: 14px; }
.s-stat-val { font-size: 1.5rem; }
.s-dash-top { padding: 16px; border-radius: 14px; flex-direction: column; align-items: flex-start; }
.s-dash-greeting { font-size: 1.1rem; }
.s-dash-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
.s-dash-info-bar { width: 100%; justify-content: flex-start; gap: 6px; }
.s-dash-info-bar span { font-size: 0.75rem; }
.s-subnav { gap: 3px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.s-subnav::-webkit-scrollbar { height: 0; }
.s-tab { padding: 6px 10px; font-size: 0.75rem; white-space: nowrap; min-height: 36px; }
.s-tab i { font-size: 0.85rem; }
.s-quick-actions { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.s-quick-actions::-webkit-scrollbar { height: 0; }
.s-qa-btn { padding: 8px 12px; font-size: 0.75rem; white-space: nowrap; min-height: 40px; }
.s-card-mod { padding: 14px 16px; }
.s-card-title { font-size: 0.82rem; }
.s-card-body { font-size: 0.8rem; }
/* S-fee cards */
.s-fee-cards { flex-direction: column; gap: 8px; }
.s-fee-cards .card { min-width: auto; }
/* Student profile section */
#sProfileExtra { grid-template-columns: 1fr !important; }
/* Bottom nav active indicator adjustment */
.m-nav-item span { font-size: 9px; }
.m-nav-item { padding: 6px 8px; min-width: 48px; }
}
/* ---- Small Mobile (380px and below) ---- */
@media (max-width: 380px) {
.stats { grid-template-columns: 1fr !important; }
.s-dash-stats { grid-template-columns: 1fr; }
.class-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.class-box { padding: 0.4rem 0.2rem; border: none; border-left: 2px solid var(--border); }
.class-box.g1 { border-left-color: #ef4444; }
.class-box.g2 { border-left-color: #f97316; }
.class-box.g3 { border-left-color: #eab308; }
.class-box.g4 { border-left-color: #22c55e; }
.class-box.g5 { border-left-color: #14b8a6; }
.class-box.g6 { border-left-color: #3b82f6; }
.class-box.g7 { border-left-color: #a855f7; }
.class-box.g8 { border-left-color: #8b5cf6; }
.class-box.g9 { border-left-color: #64748b; }
.class-box.g10 { border-left-color: #1e293b; }
.class-box .label { font-size: 11px; }
.class-box .count { display: none; }
.stat-value { font-size: 20px; }
.main { padding: 0.5rem; padding-top: 56px; padding-bottom: 64px; }
}
/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
.m-topbar { display: none !important; }
.m-bottom-nav { display: none !important; }
.hamburger { display: none !important; }
.sidebar-overlay { display: none !important; }
.sidebar { position: sticky; left: auto; width: auto; box-shadow: none; }
.sidebar.open { left: auto; }
.close-sidebar { display: none !important; }
.main { padding: 1.5rem 1.75rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.show-dashboard { padding: 1rem; }
.dashboard { border-radius: var(--radius-lg); }
.grid { border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* Reset mobile overrides */
.btn { min-height: auto; }
.btn-sm { min-height: auto; }
.stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.s-dash-grid { grid-template-columns: repeat(3, 1fr); }
.s-dash-stats { grid-template-columns: repeat(4, 1fr); }
.s-subnav { flex-wrap: wrap; overflow-x: visible; }
.s-quick-actions { flex-wrap: wrap; overflow-x: visible; }
.s-fee-cards { flex-direction: row; }
#sProfileExtra { grid-template-columns: 1fr 1fr !important; }
/* Ripple effect only on mobile */
.ripple::after { display: none; }
}
/* ===== LANDING PAGE (New Design) ===== */
#landing-section {
font-family: 'Inter', sans-serif;
color: #0f172a;
background: #fff;
position: relative;
z-index: 1;
animation: fadeUp 0.6s ease-out;
}
.lp-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.lp-section-label { text-align: center; font-size: 0.8rem; font-weight: 600; color: #6366f1; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lp-section-title { text-align: center; font-size: 2rem; font-weight: 800; margin: 0 0 0.75rem; color: #0f172a; letter-spacing: -0.02em; }
.lp-section-desc { text-align: center; font-size: 0.95rem; color: #64748b; max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; }
/* Buttons */
.lp-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; }
.lp-btn-sm { padding: 8px 20px; font-size: 0.85rem; border-radius: 10px; }
.lp-btn-lg { padding: 16px 36px; font-size: 1rem; border-radius: 12px; }
.lp-btn-primary { background: linear-gradient(135deg,#2563eb,#6366f1); color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,0.25); }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37,99,235,0.35); }
.lp-btn-outline { background: #fff; border: 1.5px solid #e2e8f0; color: #334155; }
.lp-btn-outline:hover { border-color: #6366f1; color: #6366f1; }
.lp-btn-ghost { background: transparent; color: #94a3b8; border: 1.5px solid #334155; }
.lp-btn-ghost:hover { color: #fff; border-color: #6366f1; background: rgba(99,102,241,0.1); }
.lp-btn-full { width: 100%; justify-content: center; padding: 12px; border-radius: 10px; }
.lp-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
/* ===== 1. HERO ===== */
.lp-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%); background-size: 200% 200%; animation: gradientShift 12s ease infinite; z-index: 1; }
.lp-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%,rgba(99,102,241,0.08) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 80% 80%,rgba(37,99,235,0.04) 0%,transparent 50%); pointer-events: none; }
/* Nav */
.lp-nav { border-bottom: 1px solid #e2e8f0; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
.lp-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.lp-logo { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; color: #0f172a; }
.lp-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#2563eb,#6366f1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.lp-nav-links { display: flex; align-items: center; gap: 24px; }
.lp-nav-links a { font-size: 0.85rem; font-weight: 500; color: #475569; text-decoration: none; transition: color 0.2s; }
.lp-nav-links a:hover { color: #6366f1; }
.lp-mobile-menu { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #0f172a; padding: 4px; }
/* Hero Main */
.lp-hero-main { max-width: 1100px; margin: 0 auto; padding: 60px 24px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.lp-hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: linear-gradient(135deg,#eef2ff,#e0e7ff); color: #4f46e5; margin-bottom: 1.25rem; }
.lp-hero-title { font-size: 2.8rem; font-weight: 800; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.03em; }
.lp-hero-title span { background: linear-gradient(135deg,#2563eb,#6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lp-hero-desc { font-size: 1.05rem; color: #475569; line-height: 1.7; margin: 0 0 2rem; max-width: 500px; }
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 3rem; }
.lp-hero-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 3rem; }
.lp-hero-badge-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: #334155; padding: 7px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 100px; white-space: nowrap; }
.lp-hero-badge-item i { color: #6366f1; font-size: 0.95rem; }
/* Hybrid Login Panel */
.lp-login-section { margin: -1.5rem 0 2.5rem; max-width: 420px; }
.lp-login-divider { display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:0.8rem; color:#94a3b8; }
.lp-login-divider::before,.lp-login-divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.lp-login-divider span { white-space:nowrap; }
/* Themed Login Modal */
.login-modal {
background: linear-gradient(135deg, #fff 0%, #f8faff 50%, #f5f3ff 100%);
border-radius: 20px;
padding: 2rem 1.75rem 1.75rem;
width: 90%;
max-width: 420px;
box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(99,102,241,0.08);
animation: loginSlideUp 0.3s ease;
position: relative;
overflow: hidden;
}
.login-modal::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,#2563eb,#6366f1,#8b5cf6);
}
@keyframes loginSlideUp {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.login-modal-brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
}
.login-modal-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg,#2563eb,#6366f1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.login-modal-close {
width: 32px; height: 32px;
border-radius: 8px;
border: none;
background: #f1f5f9;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: all 0.2s;
}
.login-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.login-modal-sub {
font-size: 0.85rem;
color: #94a3b8;
margin: 0 0 1.25rem;
}
.login-role-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 16px;
}
.login-role-tab {
padding: 10px 12px;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
color: #64748b;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 7px;
font-family: inherit;
}
.login-role-tab i { font-size: 1rem; }
.login-role-tab:hover {
border-color: #a5b4fc;
color: #4f46e5;
background: #eef2ff;
}
.login-role-tab.active {
background: linear-gradient(135deg,#eef2ff,#e0e7ff);
border-color: #6366f1;
color: #4f46e5;
box-shadow: 0 2px 8px rgba(99,102,241,0.1);
}
.login-method {
padding: 18px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 16px;
}
.login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
border: none;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
}
.login-btn-google {
background: #fff;
border: 1.5px solid #e2e8f0;
color: #334155;
}
.login-btn-google:hover {
border-color: #6366f1;
color: #4f46e5;
box-shadow: 0 4px 12px rgba(99,102,241,0.1);
}
.login-btn-otp {
background: #fff;
border: 1.5px solid #e2e8f0;
color: #334155;
}
.login-btn-otp:hover {
border-color: #6366f1;
color: #4f46e5;
}
.login-btn-primary {
background: linear-gradient(135deg,#2563eb,#6366f1);
color: #fff;
box-shadow: 0 4px 14px rgba(99,102,241,0.25);
}
.login-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.login-phone-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.login-country-code {
padding: 10px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
color: #0f172a;
}
.login-phone-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
font-family: inherit;
outline: none;
transition: border-color 0.2s;
background: #fff;
}
.login-phone-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
/* ===== Login Method Cards ===== */
#loginMethodSelector {
display: grid;
gap: 12px;
}
.login-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
}
.login-card:hover {
border-color: #6366f1;
box-shadow: 0 4px 20px rgba(99,102,241,0.12);
transform: translateY(-2px);
}
.login-card:active {
transform: translateY(0);
}
.login-card-icon {
width: 48px; height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.login-card-google .login-card-icon {
background: #fff;
border: 1px solid #e2e8f0;
color: #ea4335;
}
.login-card-phone .login-card-icon {
background: linear-gradient(135deg,#eef2ff,#e0e7ff);
color: #6366f1;
}
.login-card-text { flex: 1; }
.login-card-title {
font-size: 0.95rem;
font-weight: 600;
color: #0f172a;
margin-bottom: 2px;
}
.login-card-desc {
font-size: 0.8rem;
color: #94a3b8;
}
.login-card-arrow {
color: #cbd5e1;
font-size: 1.2rem;
transition: color 0.2s;
}
.login-card:hover .login-card-arrow {
color: #6366f1;
}
.login-back-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
background: none;
border: none;
font-size: 0.85rem;
font-weight: 500;
color: #6366f1;
cursor: pointer;
font-family: inherit;
transition: color 0.2s;
}
.login-back-btn:hover { color: #4f46e5; }
.login-status {
font-size: 0.8rem;
color: #ef4444;
margin-top: 8px;
text-align: center;
min-height: 1.2em;
}
.login-status {
font-size: 12px;
color: #94a3b8;
margin: 10px 0 0;
text-align: center;
}
@media(max-width:768px) {
.lp-login-section { max-width: 100%; }
.login-role-tabs { grid-template-columns: 1fr 1fr; }
.login-modal { padding: 1.5rem 1.25rem; }
.login-role-tab { padding: 8px 10px; font-size: 0.75rem; }
}
/* Hero visual */
.lp-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; width: 100%; }
.lp-hero-mockup { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.06); width: 100%; max-width: 400px; }
.mockup-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.mockup-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.mockup-body { display: flex; flex-direction: column; gap: 10px; }
.mockup-row { display: flex; gap: 8px; }
.m-bar { height: 24px; border-radius: 6px; background: #e2e8f0; }
.m-bar.green { background: #86efac; }
.lp-float-card { position: absolute; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.04); white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.lpf-1 { top: 2%; left: 2%; animation-delay: 0s; }
.lpf-2 { bottom: 5%; right: 2%; animation-delay: 0.5s; }
.lpf-3 { top: 50%; right: 4%; animation-delay: 1s; }
.lp-float-card i { font-size: 1rem; color: #6366f1; }
/* ===== 2. TRUSTED BY ===== */
.lp-institutions { padding: 80px 0; background: #f8fafc; text-align: center; }
.lp-institutions .lp-section-title { margin-bottom: 2.5rem; }
.lp-institutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.lp-inst-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px 20px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; cursor: default; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-inst-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent, #6366f1); }
.lp-inst-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.lp-inst-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 1rem; }
.lp-inst-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: #0f172a; }
.lp-inst-card p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin: 0; }
/* lp-problems & lp-audience removed — HTML sections removed */
/* ===== 4. FEATURES ===== */
.lp-features { padding: 80px 0; background: #f8fafc; }
.lp-features-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 20px; margin-top: 2rem; }
.lp-f-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; transition: all 0.25s; min-height: 200px; display: flex; flex-direction: column; }
.lp-f-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.lp-f-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 0.75rem; }
.lp-f-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.4rem; }
.lp-f-card p { font-size: 0.82rem; color: #64748b; line-height: 1.6; margin: 0; }
/* ===== 5. AI FEATURES ===== */
.lp-ai { padding: 80px 0; background: linear-gradient(180deg,#0f172a 0%,#1e293b 100%); }
.lp-ai .lp-section-label { color: #a5b4fc; }
.lp-ai .lp-section-title { color: #f1f5f9; }
.lp-ai .lp-section-desc { color: #cbd5e1; }
.lp-ai-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 2rem; }
.lp-ai-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; transition: background 0.25s, transform 0.25s; min-height: 220px; display: flex; flex-direction: column; }
.lp-ai-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }
.lp-ai-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#6366f1,#8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; margin-bottom: 0.75rem; }
.lp-ai-card h3 { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin: 0 0 0.4rem; }
.lp-ai-card p { font-size: 0.8rem; color: #cbd5e1; line-height: 1.6; margin: 0; }
/* ===== 6. MOCKUPS ===== */
.lp-mockups { padding: 80px 0; }
.lp-mockup-grid { display: flex; justify-content: center; gap: 30px; margin-top: 2rem; flex-wrap: wrap; }
.lp-mockup-device { text-align: center; }
.lp-mockup-device p { font-size: 0.85rem; font-weight: 600; color: #64748b; margin-top: 0.75rem; }
.md-top { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
.md-top span { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.md-screen { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.phone .md-screen { width: 140px; }
.tablet .md-screen { width: 200px; }
.desktop .md-screen { width: 280px; display: flex; flex-direction: row; gap: 8px; }
.desktop .md-sidebar { width: 40px; background: #e2e8f0; border-radius: 4px; }
.desktop .md-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.md-row { display: flex; gap: 6px; }
/* ===== 7. HOW IT WORKS ===== */
.lp-how { padding: 80px 0; background: #f8fafc; }
.lp-how-grid { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 2.5rem; flex-wrap: wrap; }
.lp-how-step { text-align: center; padding: 28px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; width: 200px; }
.lp-how-num { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#2563eb,#6366f1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; margin: 0 auto 0.75rem; }
.lp-how-icon { font-size: 2rem; margin-bottom: 0.75rem; color: #6366f1; }
.lp-how-step h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.4rem; }
.lp-how-step p { font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.5; }
.lp-how-connector { font-size: 1.5rem; color: #cbd5e1; margin: 0 8px; }
/* ===== 8. BENEFITS ===== */
.lp-benefits { padding: 80px 0; }
.lp-benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 2rem; }
.lp-b-card { text-align: center; padding: 28px 20px; border: 1px solid #e2e8f0; border-radius: 16px; transition: all 0.25s; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-b-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.lp-b-card i { font-size: 2rem; margin-bottom: 0.75rem; }
.lp-b-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.4rem; }
.lp-b-card p { font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.5; }
/* ===== 9. ROLES ===== */
.lp-roles { padding: 80px 0; background: #f8fafc; }
.lp-roles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 2rem; }
.lp-role-card { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
.lp-role-card:hover { border-color: #6366f1; background: #eef2ff; }
.lp-role-card i { color: #6366f1; font-size: 1.1rem; }
/* lp-testimonials removed — HTML section removed */
/* ===== 11. LAUNCH OFFER ===== */
.lp-launch-offer {
padding: 100px 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
position: relative;
overflow: hidden;
}
.lp-offer-bg-shapes {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.lp-offer-shape {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
}
.lp-offer-shape-1 {
width: 500px; height: 500px;
background: #6366f1;
top: -200px; right: -100px;
animation: offerFloat1 8s ease-in-out infinite;
}
.lp-offer-shape-2 {
width: 400px; height: 400px;
background: #8b5cf6;
bottom: -150px; left: -100px;
animation: offerFloat2 10s ease-in-out infinite;
}
.lp-offer-shape-3 {
width: 300px; height: 300px;
background: #2563eb;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: offerFloat3 12s ease-in-out infinite;
}
@keyframes offerFloat1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-30px, 30px); }
}
@keyframes offerFloat2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(30px, -20px); }
}
@keyframes offerFloat3 {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.2); }
}
.lp-offer-badge-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 1.25rem;
}
.lp-offer-emoji-badge {
font-size: 1.5rem;
animation: offerBounce 1.5s ease-in-out infinite;
}
@keyframes offerBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.lp-offer-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 6px 18px;
border-radius: 20px;
}
.lp-offer-title {
text-align: center;
font-size: 2.6rem;
font-weight: 800;
color: #f1f5f9;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
line-height: 1.25;
}
.lp-offer-title span {
background: linear-gradient(135deg, #a5b4fc, #818cf8, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lp-offer-subtitle {
text-align: center;
font-size: 1.05rem;
color: #cbd5e1;
max-width: 620px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.lp-offer-subtitle strong {
color: #e2e8f0;
}
.lp-offer-card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 28px;
padding: 48px 40px;
max-width: 780px;
margin: 0 auto;
position: relative;
z-index: 1;
box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.lp-offer-free-badge {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff;
padding: 8px 28px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(239,68,68,0.3);
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.03em;
z-index: 2;
}
.lp-offer-card-inner {
display: flex;
flex-direction: column;
gap: 28px;
}
.lp-offer-pricing-col {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px;
background: rgba(255,255,255,0.04);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
}
.lp-offer-period {
text-align: center;
}
.lp-offer-period-label {
font-size: 0.8rem;
color: #94a3b8;
font-weight: 500;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lp-offer-period-price {
font-size: 3rem;
font-weight: 800;
color: #f1f5f9;
line-height: 1;
margin-bottom: 4px;
}
.lp-offer-period-price small {
font-size: 1rem;
font-weight: 600;
color: #94a3b8;
margin-left: 4px;
}
.lp-offer-price-small {
font-size: 2.2rem;
}
.lp-offer-period-note {
font-size: 0.78rem;
color: #6b7280;
font-weight: 500;
}
.lp-offer-arrow {
color: #6366f1;
flex-shrink: 0;
animation: offerArrowMove 1.5s ease-in-out infinite;
}
@keyframes offerArrowMove {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(8px); opacity: 0.6; }
}
.lp-offer-trust-badges {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.lp-offer-trust-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: #a5b4fc;
font-weight: 600;
}
.lp-offer-trust-badges span svg {
color: #10b981;
}
.lp-offer-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 20px;
}
.lp-offer-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #cbd5e1;
font-weight: 500;
}
.lp-offer-feature svg {
flex-shrink: 0;
color: #10b981;
}
.lp-offer-notice {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px 18px;
font-size: 0.78rem;
color: #94a3b8;
line-height: 1.6;
}
.lp-offer-notice strong {
color: #fbbf24;
}
.lp-offer-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.lp-btn-glow {
position: relative;
box-shadow: 0 0 30px rgba(99,102,241,0.35);
animation: offerGlow 2s ease-in-out infinite;
}
@keyframes offerGlow {
0%, 100% { box-shadow: 0 0 30px rgba(99,102,241,0.35); }
50% { box-shadow: 0 0 50px rgba(99,102,241,0.55); }
}
.lp-btn-glow:hover {
box-shadow: 0 0 60px rgba(99,102,241,0.6) !important;
}
@media (max-width: 820px) {
.lp-offer-title { font-size: 2rem; }
.lp-offer-card { padding: 40px 28px; margin: 0 12px; }
.lp-offer-features-grid { grid-template-columns: repeat(2, 1fr); }
.lp-offer-pricing-col { flex-direction: column; gap: 12px; }
.lp-offer-arrow { transform: rotate(90deg); }
.lp-offer-free-badge { font-size: 0.78rem; padding: 6px 18px; }
.lp-offer-period-price { font-size: 2.4rem; }
.lp-offer-price-small { font-size: 1.8rem; }
}
@media (max-width: 540px) {
.lp-launch-offer { padding: 60px 0; }
.lp-offer-title { font-size: 1.5rem; }
.lp-offer-subtitle { font-size: 0.9rem; }
.lp-offer-card { padding: 32px 18px; }
.lp-offer-features-grid { grid-template-columns: 1fr; }
.lp-offer-trust-badges { flex-direction: column; align-items: center; gap: 8px; }
.lp-offer-actions { flex-direction: column; align-items: center; }
.lp-offer-actions .lp-btn { width: 100%; max-width: 280px; justify-content: center; }
.lp-offer-period-price { font-size: 2rem; }
.lp-offer-price-small { font-size: 1.5rem; }
.lp-offer-free-badge { font-size: 0.7rem; padding: 5px 14px; white-space: normal; }
}
@media (max-width: 380px) {
.lp-offer-title { font-size: 1.2rem; }
.lp-offer-card { padding: 28px 14px; border-radius: 20px; }
.lp-offer-period { width: 100%; }
.lp-offer-pricing-col { padding: 16px; }
.lp-offer-notice { font-size: 0.72rem; padding: 10px 12px; }
}
/* ===== 12. PRICING ===== */
.lp-pricing { padding: 80px 0; background: #f8fafc; }
.lp-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 2rem; }
.lp-plan { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px 28px; text-align: center; position: relative; transition: all 0.25s; min-height: 480px; display: flex; flex-direction: column; }
.lp-plan:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.lp-plan-popular { border-color: #6366f1; box-shadow: 0 4px 24px rgba(99,102,241,0.1); }
.lp-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#2563eb,#6366f1); color: #fff; padding: 4px 20px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.lp-plan h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; }
.lp-plan-price { margin-bottom: 0.75rem; }
.lp-plan-price .price { font-size: 2.2rem; font-weight: 800; color: #0f172a; }
.lp-plan-price .per { font-size: 0.85rem; color: #94a3b8; }
.lp-plan-desc { font-size: 0.82rem; color: #64748b; margin: 0 0 1.5rem; }
.lp-plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; }
.lp-plan-features li { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.82rem; color: #475569; border-bottom: 1px solid #f1f5f9; }
.lp-plan-features li:last-child { border: none; }
.lp-plan-features li .ti-check { color: #16a34a; }
.lp-plan-features li .ti-x { color: #dc2626; }
/* ===== Student Dashboard Premium Styles ===== */
#panel-student-portal { background: #f8fafc; }
.s-portal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
/* Sub Navigation */
.s-subnav { display: flex; gap: 4px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; position: relative; }
.s-tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: #64748b; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
.s-tab:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.s-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.2); }
.s-tab i { font-size: 1rem; }
.s-more-dropdown { position: relative; }
.s-more-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 180px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; z-index: 50; flex-direction: column; gap: 2px; }
.s-more-menu .s-tab { width: 100%; justify-content: flex-start; border-radius: 8px; }
.s-more-open { display: flex; }
/* Top Header */
.s-dash-top { background: linear-gradient(135deg,#1e40af,#2563eb,#3b82f6); border-radius: 20px; padding: 24px 28px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: #fff; }
.s-dash-greeting-wrap { display: flex; align-items: center; gap: 16px; }
.s-dash-avatar { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; backdrop-filter: blur(4px); border: 2px solid rgba(255,255,255,0.3); }
.s-dash-greeting { font-size: 1.3rem; font-weight: 700; margin: 0; color: #fff; }
.s-dash-date { font-size: 0.82rem; color: rgba(255,255,255,0.75); margin: 2px 0 0; }
.s-dash-info-bar { display: flex; gap: 16px; flex-wrap: wrap; background: rgba(255,255,255,0.12); padding: 10px 18px; border-radius: 12px; backdrop-filter: blur(4px); font-size: 0.8rem; }
.s-dash-info-bar span { color: rgba(255,255,255,0.9); }
.s-dash-info-bar strong { color: rgba(255,255,255,0.6); font-weight: 500; }
/* Stats Cards */
.s-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.s-stat-card { background: #fff; border-radius: 16px; padding: 20px; text-align: center; transition: all 0.25s; border: 1px solid #e2e8f0; position: relative; overflow: hidden; }
.s-stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.s-stat-card .s-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 10px; }
.s-stat-blue .s-stat-icon { background: #eff6ff; color: #2563eb; }
.s-stat-orange .s-stat-icon { background: #fff7ed; color: #ea580c; }
.s-stat-green .s-stat-icon { background: #f0fdf4; color: #22c55e; }
.s-stat-purple .s-stat-icon { background: #f5f3ff; color: #7c3aed; }
.s-stat-val { font-size: 1.8rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.s-stat-lbl { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; font-weight: 500; }
/* Quick Actions */
.s-quick-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.s-qa-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #fff; font-size: 0.82rem; font-weight: 500; color: #475569; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.s-qa-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,0.1); }
.s-qa-btn i { font-size: 1rem; }
.s-qa-id i { color: #2563eb; }
.s-qa-pay i { color: #22c55e; }
.s-qa-tt i { color: #f59e0b; }
.s-qa-result i { color: #7c3aed; }
.s-qa-contact i { color: #ef4444; }
/* Main Cards Grid */
.s-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-card-mod { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; transition: all 0.25s; display: flex; flex-direction: column; }
.s-card-mod:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.s-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.s-card-mod .s-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.s-card-att .s-card-icon { background: #f0fdf4; color: #22c55e; }
.s-card-tt .s-card-icon { background: #fefce8; color: #f59e0b; }
.s-card-hw .s-card-icon { background: #eff6ff; color: #2563eb; }
.s-card-fees .s-card-icon { background: #fff7ed; color: #ea580c; }
.s-card-notice .s-card-icon { background: #fdf2f8; color: #db2777; }
.s-card-events .s-card-icon { background: #ecfdf5; color: #059669; }
.s-card-exam .s-card-icon { background: #f5f3ff; color: #7c3aed; }
.s-card-result .s-card-icon { background: #fef2f2; color: #ef4444; }
.s-card-announce .s-card-icon { background: #fefce8; color: #ca8a04; }
.s-card-head-text { flex: 1; }
.s-card-title { font-size: 0.88rem; font-weight: 600; color: #0f172a; margin: 0; }
.s-card-sub { font-size: 0.72rem; color: #94a3b8; margin: 1px 0 0; }
.s-card-mod .s-card-body { font-size: 0.85rem; color: #334155; flex: 1; margin-bottom: 10px; min-height: 2em; }
.s-card-link { background: none; border: none; padding: 0; font-size: 0.78rem; font-weight: 600; color: #2563eb; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; margin-top: auto; }
.s-card-link:hover { gap: 8px; }
.s-card-link i { font-size: 0.8rem; }
/* Badge styles */
.s-badge { display: inline-block; padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.3px; }
.s-badge-present { background: #dcfce7; color: #16a34a; }
.s-badge-absent { background: #fce7f3; color: #db2777; }
.s-badge-late { background: #fef3c7; color: #d97706; }
.s-badge-na { background: #f1f5f9; color: #94a3b8; }
.s-detail { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }
/* Card content items */
.s-tt-row, .s-hw-row, .s-ev-row, .s-ex-row, .s-res-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #f1f5f9; gap: 8px; font-size: 0.82rem; }
.s-tt-row:last-child, .s-hw-row:last-child, .s-ev-row:last-child, .s-ex-row:last-child, .s-res-row:last-child { border: none; }
.s-tt-period { font-size: 0.72rem; color: #94a3b8; background: #f8fafc; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.s-hw-sub { font-weight: 600; color: #2563eb; }
.s-ev-date, .s-ex-date { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }
.s-res-score { font-weight: 700; color: #7c3aed; }
.s-notice-row, .s-ann-row { padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.s-notice-row:last-child, .s-ann-row:last-child { border: none; }
.s-notice-row strong, .s-ann-row strong { font-size: 0.82rem; color: #0f172a; }
.s-notice-preview, .s-ann-preview { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-fee-warn { color: #db2777; font-weight: 600; font-size: 0.85rem; }
.s-fee-ok { color: #22c55e; font-weight: 600; font-size: 0.85rem; }
.s-empty { color: #94a3b8; font-size: 0.82rem; padding: 4px 0; }
/* AI Assistant */
.s-ai-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 20px rgba(37,99,235,0.35); transition: all 0.3s; z-index: 100; border: none; }
.s-ai-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,99,235,0.45); }
.s-ai-fab.s-ai-active { transform: rotate(45deg); }
.s-ai-panel { position: fixed; bottom: 90px; right: 24px; width: 340px; max-height: 460px; background: #fff; border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,0.15); z-index: 101; display: none; flex-direction: column; overflow: hidden; animation: slideUp 0.3s ease; }
.s-ai-open { display: flex; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.s-ai-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: linear-gradient(135deg,#1e40af,#2563eb); color: #fff; font-size: 0.9rem; font-weight: 600; }
.s-ai-close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.s-ai-close:hover { background: rgba(255,255,255,0.25); }
.s-ai-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.s-ai-msg { padding: 10px 14px; border-radius: 12px; font-size: 0.82rem; line-height: 1.5; margin-bottom: 14px; }
.s-ai-bot { background: #f1f5f9; color: #334155; border-bottom-left-radius: 4px; }
.s-ai-suggestions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.s-ai-chip { display: block; width: 100%; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 0.82rem; color: #475569; cursor: pointer; text-align: left; font-family: inherit; transition: all 0.2s; }
.s-ai-chip:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.s-ai-response { padding: 10px 14px; border-radius: 12px; background: #eff6ff; color: #1e40af; font-size: 0.82rem; min-height: 2em; border-bottom-right-radius: 4px; }
/* Sidebar student info */
.sidebar-student-info { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
/* Responsive */
@media (max-width: 1024px) {
.s-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.s-dash-stats { grid-template-columns: repeat(2, 1fr); }
.s-dash-grid { grid-template-columns: 1fr; }
.s-dash-top { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
.s-dash-info-bar { width: 100%; justify-content: flex-start; }
.s-ai-panel { width: calc(100% - 32px); right: 16px; bottom: 80px; }
.s-quick-actions { gap: 8px; }
.s-qa-btn { padding: 8px 14px; font-size: 0.78rem; }
}
@media (max-width: 480px) {
.s-dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.s-stat-card { padding: 14px; }
.s-stat-val { font-size: 1.4rem; }
.s-dash-top { padding: 16px; border-radius: 14px; }
.s-dash-greeting { font-size: 1.1rem; }
.s-dash-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
.s-subnav { gap: 3px; }
.s-tab { padding: 5px 10px; font-size: 0.75rem; }
.s-tab i { font-size: 0.85rem; }
}
@media (max-width: 380px) {
.s-dash-stats { grid-template-columns: 1fr; }
}
/* ===== 12. FAQ ===== */
.lp-faq { padding: 80px 0; }
.lp-faq-list { max-width: 700px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.lp-faq-q { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.lp-faq-q:hover { background: #f8fafc; }
/* ===== 13. CONTACT ===== */
.lp-contact { padding: 80px 0; background: #f8fafc; }
.lp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.lp-contact-info { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.lp-contact-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.lp-contact-item i { font-size: 1.3rem; }
.lp-contact-item a { color: #0f172a; text-decoration: none; font-weight: 500; }
.lp-contact-item a:hover { color: #6366f1; }
.lp-contact-form { display: flex; flex-direction: column; gap: 12px; }
.lp-contact-form input { padding: 12px 16px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-family: inherit; font-size: 0.85rem; outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
.lp-contact-form input:focus { border-color: #6366f1; }
/* ===== 14. FINAL CTA ===== */
.lp-final-cta { padding: 80px 24px; text-align: center; background: linear-gradient(135deg,#0f172a,#1e293b); }
.lp-final-cta h2 { font-size: 2rem; font-weight: 800; color: #f1f5f9; margin: 0 0 0.75rem; }
.lp-final-cta p { font-size: 1rem; color: #94a3b8; margin: 0 0 2rem; }
.lp-final-cta .lp-btn-lg { font-size: 1.1rem; padding: 18px 44px; }
/* Footer */
.lp-footer { padding: 32px 24px; text-align: center; font-size: 0.85rem; color: #94a3b8; border-top: 1px solid #e2e8f0; }
/* ===== RESPONSIVE ===== */
/* Tablet landscape (768-900px) */
@media (max-width: 900px) {
.lp-hero-main { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.lp-hero-desc { margin: 0 auto 2rem; }
.lp-hero-actions { justify-content: center; }
.lp-hero-badges { justify-content: center; }
.lp-hero-visual { max-width: 340px; margin: 0 auto; }
.lp-nav-links { gap: 14px; }
.lp-ai-grid { grid-template-columns: repeat(2,1fr); }
.lp-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 600px; margin: 2rem auto 0; }
.lp-contact-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
.lp-benefits-grid { grid-template-columns: repeat(2,1fr); }
.lp-roles-grid { grid-template-columns: repeat(2,1fr); }
.lp-float-card { display: flex; font-size: 0.7rem; padding: 6px 10px; }
.lp-hero-title { font-size: 2.3rem; }
.lp-container { padding: 0 20px; }
}
/* Tablet portrait / large phone (640-768px) */
@media (max-width: 768px) {
.lp-nav-links { display: none; }
.lp-nav-links.lp-nav-open { display: flex; }
.lp-mobile-menu { display: block; }
.lp-hero-main { padding: 36px 20px 60px; gap: 28px; }
.lp-hero-title { font-size: 2rem; }
.lp-hero-badges { gap: 10px; }
.lp-hero-badge-item { font-size: 0.75rem; padding: 5px 12px; }
.lp-section-title { font-size: 1.5rem; }
.lp-section-desc { font-size: 0.88rem; margin-bottom: 1.75rem; }
.lp-features-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.lp-f-card { padding: 20px; }
.lp-ai-grid { grid-template-columns: repeat(2,1fr); }
.lp-inst-card { padding: 24px 16px; }
.lp-institutions-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 600px; }
.lp-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 500px; }
.lp-how-grid { flex-direction: column; gap: 16px; }
.lp-how-connector { transform: rotate(90deg); margin: 4px 0; }
.lp-how-step { width: 100%; max-width: 300px; }
.lp-benefits-grid { grid-template-columns: repeat(2,1fr); }
.lp-roles-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
.lp-role-card { padding: 12px 14px; font-size: 0.8rem; }
.phone .md-screen { width: 100px; }
.tablet .md-screen { width: 150px; }
.desktop .md-screen { width: 200px; }
.lp-float-card { display: flex; font-size: 0.65rem; padding: 5px 8px; gap: 5px; }
.lp-float-card i { font-size: 0.75rem; }
.lp-container { padding: 0 18px; }
.login-modal { padding: 1.5rem 1.25rem; }
}
/* Phone (480-640px) */
@media (max-width: 640px) {
.lp-hero-main { padding: 30px 16px 50px; }
.lp-hero-title { font-size: 1.8rem; }
.lp-hero-badges { gap: 8px; }
.lp-hero-badge-item { font-size: 0.7rem; padding: 4px 10px; }
.lp-section-title { font-size: 1.3rem; }
.lp-section-desc { font-size: 0.85rem; margin-bottom: 1.5rem; }
.lp-features-grid { grid-template-columns: 1fr; }
.lp-f-card { padding: 16px; }
.lp-ai-grid { grid-template-columns: 1fr; }
.lp-ai-card { padding: 16px; }
.lp-pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
.lp-mockup-grid { gap: 16px; }
.lp-institutions { padding: 40px 0; }
.lp-problems { padding: 40px 0; }
.lp-features { padding: 40px 0; }
.lp-ai { padding: 40px 0; }
.lp-mockups { padding: 40px 0; }
.lp-how { padding: 40px 0; }
.lp-benefits { padding: 40px 0; }
.lp-roles { padding: 40px 0; }
.lp-pricing { padding: 40px 0; }
.lp-faq { padding: 40px 0; }
.lp-contact { padding: 40px 0; }
.lp-inst-card { padding: 24px 16px; }
.lp-institutions-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 400px; }
.lp-f-card h3 { font-size: 0.85rem; }
.lp-f-card p { font-size: 0.78rem; }
}
/* Small phone (380-480px) */
@media (max-width: 480px) {
.lp-hero-main { padding: 24px 14px 40px; }
.lp-hero-title { font-size: 1.5rem; }
.lp-hero-desc { font-size: 0.85rem; }
.lp-hero-actions { flex-direction: column; }
.lp-btn-lg { width: 100%; justify-content: center; padding: 14px 24px; font-size: 0.9rem; }
.lp-hero-badges { gap: 6px; }
.lp-hero-badge-item { font-size: 0.65rem; padding: 4px 8px; }
.lp-section-title { font-size: 1.2rem; }
.lp-institutions-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp-plan { padding: 20px 16px; }
.lp-plan-price .price { font-size: 1.6rem; }
.lp-faq-q { padding: 12px 14px; font-size: 0.82rem; }
.lp-faq-a { font-size: 0.8rem; padding: 0 14px 12px; }
.lp-contact-item { font-size: 0.82rem; }
.lp-final-cta h2 { font-size: 1.3rem; }
.lp-final-cta p { font-size: 0.85rem; }
.lp-final-cta .lp-btn-lg { padding: 14px 28px; font-size: 0.9rem; }
.lp-ai-card h3 { font-size: 0.82rem; }
.lp-ai-card p { font-size: 0.76rem; }
.lp-how-step { max-width: 100%; }
.lp-b-card { padding: 18px 12px; }
.lp-b-card h3 { font-size: 0.85rem; }
.lp-b-card p { font-size: 0.78rem; }
.lp-container { padding: 0 14px; }
.login-modal { padding: 1.25rem 1rem; border-radius: 16px; }
.login-role-tab { font-size: 0.72rem; padding: 6px 8px; }
}
/* Very small phone (≤380px) */
@media (max-width: 380px) {
.lp-hero-main { padding: 20px 10px 32px; }
.lp-hero-title { font-size: 1.2rem; }
.lp-hero-desc { font-size: 0.8rem; }
.lp-hero-badges { gap: 4px; }
.lp-hero-badge-item { font-size: 0.6rem; padding: 3px 7px; }
.lp-hero-badge { font-size: 0.68rem; padding: 4px 10px; }
.lp-nav-inner { padding: 0 10px; height: 52px; }
.lp-logo { font-size: 0.95rem; }
.lp-logo-icon { width: 28px; height: 28px; font-size: 0.85rem; }
.lp-section-title { font-size: 1.05rem; }
.lp-section-desc { font-size: 0.76rem; }
.lp-features-grid { gap: 10px; }
.lp-ai-grid { gap: 10px; }
.lp-how-step { padding: 18px; }
.lp-how-step h3 { font-size: 0.82rem; }
.lp-how-step p { font-size: 0.76rem; }
.lp-b-card { padding: 16px 10px; }
.lp-b-card h3 { font-size: 0.82rem; }
.lp-b-card p { font-size: 0.76rem; }
.lp-roles-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-role-card { padding: 10px 10px; font-size: 0.74rem; }
.lp-t-card { padding: 16px; }
.lp-t-card > p { font-size: 0.78rem; }
.lp-mockup-device { display: none; }
.lp-mockup-device.phone { display: block; }
.phone .md-screen { width: 80px; }
.lp-contact-grid { gap: 20px; }
.lp-contact-form input { padding: 8px 12px; font-size: 0.78rem; }
.login-modal { padding: 1rem 0.75rem; }
}
/* ===== Student Portal ===== */
.student-subnav { scrollbar-width: thin; }
.student-subnav::-webkit-scrollbar { height: 4px; }
.student-subnav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.student-tab {
padding: 6px 14px; border: 1px solid var(--border); background: var(--surface-1);
border-radius: 20px; font-size: 12px; cursor: pointer; white-space: nowrap;
display: flex; align-items: center; gap: 5px; color: var(--text-secondary); transition: all 0.2s;
}
.student-tab:hover { border-color: var(--text-accent); color: var(--text-accent); }
.student-tab.active { background: var(--text-accent); color: #fff; border-color: var(--text-accent); }
.student-section { display: none; }
.student-section.active { display: block; overflow-x: auto; }
.student-section table { min-width: 500px; }
/* Student Portal Mobile */
@media (max-width: 768px) {
.student-subnav { gap: 6px; padding-bottom: 10px; }
.student-tab { padding: 5px 10px; font-size: 11px; }
.student-tab i { font-size: 14px; }
#panel-student-portal .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
#panel-student-portal .stat-card { padding: 10px; }
#panel-student-portal .stat-value { font-size: 16px; }
#panel-student-portal .stat-label { font-size: 10px; }
#panel-student-portal .s-grid-2 { grid-template-columns: 1fr !important; }
#panel-student-portal table { font-size: 11px !important; }
#panel-student-portal td, #panel-student-portal th { padding: 4px 6px !important; }
#sProfileExtra { grid-template-columns: 1fr 1fr !important; gap: 6px; }
#sProfileExtra div { font-size: 11px; }
#panel-student-portal .card { padding: 10px; }
#studentWelcomeMsg { font-size: 16px !important; }
#s-section-sqr .card { display: block !important; }
}
@media (max-width: 480px) {
.student-tab { padding: 4px 8px; font-size: 10px; gap: 3px; }
.student-tab i { font-size: 12px; }
#panel-student-portal .stats { grid-template-columns: 1fr 1fr; gap: 6px; }
#panel-student-portal .stat-card { padding: 8px; }
#panel-student-portal .stat-value { font-size: 14px; }
#panel-student-portal .s-fee-cards { flex-direction: column; gap: 8px !important; }
#panel-student-portal .s-grid-2 { grid-template-columns: 1fr !important; }
#sProfileExtra { grid-template-columns: 1fr !important; }
#panel-student-portal td, #panel-student-portal th { padding: 3px 4px !important; font-size: 10px !important; }
}
@media (max-width: 380px) {
#panel-student-portal .stats { grid-template-columns: 1fr; }
.student-tab { padding: 3px 6px; font-size: 9px; }
}
/* ===== PREMIUM STUDENT MODAL ===== */
.stu-modal {
max-width: 680px !important;
width: 92vw;
padding: 0 !important;
overflow: hidden;
border-radius: 20px;
animation: feeFadeIn 0.3s ease;
box-shadow: 0 25px 80px rgba(0,0,0,0.18);
}
#stuModalBody {
max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
}
#stuModalBody::-webkit-scrollbar { width: 4px; }
#stuModalBody::-webkit-scrollbar-track { background: transparent; }
#stuModalBody::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
.stu-close {
position: absolute; top: 16px; right: 16px; z-index: 10;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 18px; color: #475569;
transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stu-close:hover { background: #fff; color: #DC2626; transform: scale(1.05); }
.stu-hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #F0F9FF 100%);
}
.stu-hero-bg {
position: absolute; top: -50%; right: -20%;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.stu-hero-content {
display: flex; align-items: center; gap: 20px;
padding: 28px 28px 24px; position: relative;
}
.stu-avatar-lg {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, #4F46E5, #6366F1);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700; flex-shrink: 0;
box-shadow: 0 4px 16px rgba(79,70,229,0.3);
border: 3px solid #fff;
}
.stu-hero-info { flex: 1; min-width: 0; }
.stu-hero-name { font-size: 20px; font-weight: 700; color: #1E293B; margin-bottom: 2px; }
.stu-hero-class { font-size: 13px; color: #6366F1; font-weight: 500; margin-bottom: 6px; }
.stu-hero-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #64748B; }
.stu-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.stu-hero-meta span i { font-size: 12px; color: #94A3B8; }
.stu-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.stu-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 14px; border: none; border-radius: 9px;
background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);
color: #4F46E5; font-size: 12px; font-weight: 500; cursor: pointer;
transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.stu-btn:hover { background: #fff; box-shadow: 0 2px 12px rgba(99,102,241,0.15); transform: translateY(-1px); }
.stu-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; background: #F8FAFC; }
.stu-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stu-stat-card {
background: #fff; border-radius: 14px; padding: 16px;
border: 1px solid #E5E7EB;
border-top: 3px solid var(--sc-color, #6366F1);
transition: transform 0.2s, box-shadow 0.2s;
}
.stu-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.stu-stat-val { font-size: 22px; font-weight: 700; color: #1E293B; line-height: 1.2; margin-bottom: 2px; }
.stu-stat-lbl { font-size: 11px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; }
.stu-stat-bar { margin-top: 8px; height: 4px; background: #F1F5F9; border-radius: 4px; overflow: hidden; }
.stu-stat-bar div { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.stu-section {
background: #fff; border-radius: 14px; border: 1px solid #E5E7EB;
overflow: hidden; transition: box-shadow 0.2s;
}
.stu-section:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.stu-section-hd {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px; cursor: pointer;
font-size: 14px; font-weight: 600; color: #1E293B;
user-select: none; transition: background 0.15s;
}
.stu-section-hd:hover { background: #FAFBFC; }
.stu-section-hd i:first-child { color: #6366F1; font-size: 16px; }
.stu-section-toggle { margin-left: auto; color: #94A3B8; font-size: 14px; transition: transform 0.2s; }
.stu-section.collapsed .stu-section-toggle { transform: rotate(-90deg); }
.stu-section.collapsed .stu-section-bd { display: none; }
.stu-section-bd { padding: 0 18px 16px; }
.stu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stu-table thead th {
padding: 8px 12px; text-align: left;
font-weight: 600; color: #64748B; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.3px;
background: #F8FAFC; border-bottom: 1px solid #E5E7EB;
}
.stu-table tbody td { padding: 8px 12px; border-bottom: 1px solid #F1F5F9; color: #334155; }
.stu-table tbody tr:hover { background: #F8FAFC; }
.stu-table tbody tr:last-child td { border-bottom: none; }
.stu-empty-row { text-align: center; padding: 24px !important; color: #94A3B8; font-size: 13px; }
.stu-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 600;
}
.stu-badge.present, .stu-badge.success { background: #DCFCE7; color: #16A34A; }
.stu-badge.absent, .stu-badge.danger { background: #FEE2E2; color: #DC2626; }
.stu-badge.warning { background: #FEF3C7; color: #D97706; }
.stu-badge.grade { background: #EEF2FF; color: #4F46E5; }
.stu-badge.late { background: #FEF3C7; color: #D97706; }
.stu-badge.leave { background: #DBEAFE; color: #2563EB; }
.stu-muted { color: #94A3B8; }
.stu-fee-group {
border: 1px solid #E5E7EB; border-radius: 12px;
padding: 12px 16px; margin-bottom: 10px;
background: #fff; transition: all 0.15s;
}
.stu-fee-group.paid { background: #F0FDF4; border-color: #BBF7D0; }
.stu-fee-group-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.stu-fee-group-name { font-weight: 600; font-size: 13px; color: #1E293B; flex: 1; }
.stu-fee-group-amt { font-size: 12px; color: #64748B; }
.stu-fee-group-items { display: flex; flex-wrap: wrap; gap: 5px; }
.stu-fee-chip {
font-size: 11px; padding: 3px 10px; border-radius: 20px;
background: #FEF3C7; color: #92400E;
border: 1px solid #FDE68A;
display: inline-flex; align-items: center; gap: 3px;
}
.stu-fee-chip.paid { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.stu-fee-chip.more { background: #F1F5F9; color: #64748B; border-color: #E5E7EB; }
.stu-fee-chip i { font-size: 10px; }
.stu-empty { text-align: center; padding: 20px; color: #94A3B8; font-size: 13px; }
.stu-notes { margin-top: 8px; padding: 10px 14px; background: #FFFBEB; border-radius: 10px; font-size: 12px; color: #92400E; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #FEF3C7; }
.stu-notes i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.stu-sub-section { margin-bottom: 12px; }
.stu-sub-hd { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.stu-analysis { margin-bottom: 12px; }
.stu-analysis-lbl {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; margin-bottom: 6px;
}
.stu-analysis-lbl.green { color: #16A34A; }
.stu-analysis-lbl.red { color: #DC2626; }
.stu-analysis-lbl.blue { color: #2563EB; }
.stu-analysis-item {
font-size: 12px; color: #475569; padding: 4px 12px 4px 24px;
position: relative;
}
.stu-analysis-item::before {
content: ''; position: absolute; left: 8px; top: 10px;
width: 5px; height: 5px; border-radius: 50%; background: #CBD5E1;
}
.stu-remarks { font-size: 13px; color: #475569; line-height: 1.6; padding: 4px 0; }
/* Student modal responsive */
@media (max-width: 767px) {
.stu-modal { width: 100%; border-radius: 16px 16px 0 0; }
#stuModalBody { max-height: 92vh; }
.stu-hero-content { flex-direction: column; text-align: center; padding: 24px 20px 20px; }
.stu-hero-meta { justify-content: center; }
.stu-hero-actions { width: 100%; justify-content: center; }
.stu-body { padding: 16px; gap: 12px; }
.stu-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stu-stat-card { padding: 12px; }
.stu-stat-val { font-size: 18px; }
.stu-avatar-lg { width: 60px; height: 60px; font-size: 22px; }
.stu-hero-name { font-size: 17px; }
}
@media (max-width: 480px) {
.stu-stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
.stu-section-hd { padding: 12px 14px; font-size: 13px; }
.stu-section-bd { padding: 0 14px 12px; }
.stu-table { font-size: 12px; }
.stu-table thead th, .stu-table tbody td { padding: 6px 8px; }
}