:root {
    --emerald: #1a7a5e;
    --emerald-light: #e6f5f0;
    --emerald-mid: #4aad8b;
    --gold: #c9922a;
    --gold-light: #fdf3e3;
    --gold-mid: #e8b454;
    --navy: #1a2744;
    --navy-mid: #2d3f6b;
    --cream: #faf8f4;
    --white: #ffffff;
    --text-primary: #1a2744;
    --text-secondary: #5a6a8a;
    --text-muted: #8898b4;
    --border: rgba(26,39,68,0.12);
    --border-light: rgba(26,39,68,0.07);
    --shadow-sm: 0 2px 8px rgba(26,39,68,0.08);
    --shadow-md: 0 4px 20px rgba(26,39,68,0.12);
    --shadow-lg: 0 12px 40px rgba(26,39,68,0.18);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xl: 24px;
    --font: 'Plus Jakarta Sans', sans-serif;
    --font-arabic: 'Amiri', serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: var(--font); background: var(--cream); color: var(--text-primary); min-height: 100vh; }

  /* ===== NAVIGATION ===== */
  .app-nav {
    position: fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(250,248,244,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    padding: 0 2rem;
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
  .nav-logo-icon { width:34px; height:34px; background: linear-gradient(135deg, var(--emerald), var(--emerald-mid)); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-size:16px; font-weight:700; font-family:var(--font-arabic); overflow:hidden; }
  .nav-logo-icon img { width:34px; height:34px; object-fit:cover; border-radius:10px; display:block; background:none; }
  .nav-logo-icon:has(img) { background:none; padding:0; }
  .nav-logo-text { font-size:15px; font-weight:700; color: var(--navy); }
  .nav-logo-text span { color: var(--emerald); }
  .nav-tabs { display:flex; gap:4px; background: var(--border-light); border-radius:10px; padding:3px; }
  .nav-tab { padding:5px 16px; border-radius:8px; border:none; background:none; cursor:pointer; font-family:var(--font); font-size:13px; font-weight:500; color: var(--text-secondary); transition:all 0.2s; }
  .nav-tab.active { background: white; color: var(--text-primary); box-shadow: var(--shadow-sm); }

  /* ===== PAGES ===== */
  .page { display:none; min-height:100vh; }
  .page.active { display:block; }

  /* ===== LANDING PAGE ===== */
  #page-landing { 
    background: var(--cream);
    padding-top: 60px;
  }
  .landing-hero {
    min-height: 100vh;
    display: flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 5rem 2rem 2rem;
    position: relative;
    overflow: hidden;
  }
  .hero-bg-pattern {
    position:absolute; top:0; left:0; right:0; bottom:0;
    background-image: 
      radial-gradient(circle at 20% 20%, rgba(26,122,94,0.06) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(201,146,42,0.06) 0%, transparent 50%);
    z-index:0;
  }
  .hero-ornament {
    position:absolute; font-family:var(--font-arabic); font-size:180px; opacity:0.04;
    color: var(--emerald); z-index:0; user-select:none; line-height:1;
  }
  .hero-ornament-1 { top:-20px; right:-20px; transform:rotate(-15deg); }
  .hero-ornament-2 { bottom:-40px; left:-20px; transform:rotate(15deg); }
  .hero-content { position:relative; z-index:1; text-align:center; max-width:600px; }
  .hero-arabic {
    font-family: var(--font-arabic); font-size:28px; color: var(--emerald);
    margin-bottom: 0.5rem; opacity:0.8;
  }
  .hero-title {
    font-size: 42px; font-weight: 800; line-height: 1.15;
    color: var(--navy); margin-bottom: 0.75rem;
  }
  .hero-title span { color: var(--emerald); }
  .hero-subtitle { font-size:16px; color: var(--text-secondary); line-height:1.6; margin-bottom:2rem; max-width:480px; margin-left:auto; margin-right:auto; }

  .login-selector { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
  .login-card {
    background: white; border-radius: var(--radius-xl); padding: 1.75rem 2rem;
    border: 1.5px solid var(--border); cursor:pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-sm);
    width: 200px; flex: 0 0 200px;
    display:flex; flex-direction:column; align-items:center; gap:0.85rem;
  }
  .login-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--emerald); }
  .login-card-icon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center; font-size:30px;
  }
  .login-card-icon.guru { background: linear-gradient(135deg, #e6f5f0, #c8ece3); }
  .login-card-icon.siswa { background: linear-gradient(135deg, #fdf3e3, #fae3b4); }
  .login-card-label { font-size:17px; font-weight:700; color:var(--navy); }
  .login-card-desc { font-size:12px; color: var(--text-muted); text-align:center; min-height:32px; display:flex; align-items:center; justify-content:center; }
  .login-card-arrow {
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--emerald-light); color: var(--emerald); font-size:15px;
    margin-top: 0.25rem;
  }
  .login-card:hover .login-card-arrow { background: var(--emerald); color:white; }

  .hero-stats { display:flex; gap:2rem; justify-content:center; margin-top:1.75rem; flex-wrap:wrap; }
  .hero-stat { text-align:center; }
  .hero-stat-num { font-size:28px; font-weight:800; color:var(--emerald); }
  .hero-stat-label { font-size:12px; color: var(--text-muted); margin-top:2px; }
  .hero-stat-div { width:1px; background: var(--border); }

  /* =====  PAGE ===== */
  #page-login {
    background: var(--cream);
    min-height: 100vh; display:flex; align-items:center; justify-content:center;
    padding: 80px 1rem 2rem;
  }
  .login-box {
    background: white; border-radius: var(--radius-xl); padding: 2.5rem;
    width:100%; max-width: 420px; box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
  }
  .login-header { text-align:center; margin-bottom: 2rem; }
  .login-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:1.25rem; }
  .login-logo-icon { width:48px; height:48px; background: linear-gradient(135deg,var(--emerald),var(--emerald-mid)); border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; font-size:22px; font-weight:700; font-family:var(--font-arabic); overflow:hidden; }
  .login-logo-icon img { width:48px; height:48px; object-fit:cover; border-radius:14px; display:block; }
  .login-logo-icon:has(img) { background:none; padding:0; }
  .login-logo-text { font-size:20px; font-weight:800; color:var(--navy); }
  .login-logo-text span { color:var(--emerald); }
  .login-role-badge {
    display:inline-block; padding:4px 14px; border-radius:20px;
    font-size:12px; font-weight:600; margin-bottom:0.5rem;
  }
  .login-role-badge.guru { background:var(--emerald-light); color:var(--emerald); }
  .login-role-badge.siswa { background:var(--gold-light); color:var(--gold); }
  .login-title { font-size:22px; font-weight:700; color:var(--navy); }
  .login-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
  .form-group { margin-bottom:1.25rem; }
  .form-label { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
  .form-input {
    width:100%; padding:11px 14px; border-radius:var(--radius-sm);
    border: 1.5px solid var(--border); background:var(--cream);
    font-family:var(--font); font-size:14px; color:var(--text-primary);
    transition: border-color 0.2s, background 0.2s; outline:none;
  }
  .form-input:focus { border-color:var(--emerald); background:white; }
  .form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }
  .btn-login {
    width:100%; padding:13px; border-radius:var(--radius-sm);
    border:none; cursor:pointer; font-family:var(--font);
    font-size:15px; font-weight:700; color:white;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-mid));
    transition: transform 0.15s, box-shadow 0.15s; margin-top:0.5rem;
  }
  .btn-login:hover { transform:translateY(-1px); box-shadow: 0 6px 20px rgba(26,122,94,0.35); }
  .btn-login.siswa { background: linear-gradient(135deg, var(--gold), var(--gold-mid)); }
  .btn-login.siswa:hover { box-shadow: 0 6px 20px rgba(201,146,42,0.35); }
  .login-back { text-align:center; margin-top:1.25rem; }
  .login-back a { font-size:13px; color:var(--text-muted); text-decoration:none; }
  .login-back a:hover { color:var(--emerald); }
  .login-page-inner { width:100%; display:flex; justify-content:center; }
  .login-alert {
    margin-bottom:1.25rem; padding:11px 14px; border-radius:var(--radius-sm);
    font-size:13px; font-weight:500; text-align:center;
  }
  .login-alert.error { background:#fdecea; color:#c0392b; border:1px solid rgba(192,57,43,0.25); }
  .login-alert.success { background:var(--emerald-light); color:var(--emerald); border:1px solid rgba(26,122,94,0.25); }

  /* ===== DASHBOARD LAYOUT ===== */
  .dashboard-layout { display:flex; min-height:100vh; padding-top:60px; }
  .sidebar {
    width: 240px; min-height:calc(100vh - 60px);
    background: var(--navy); position:fixed; top:60px; left:0; bottom:0;
    padding: 1.5rem 0; overflow-y:auto; z-index:50;
  }
  .sidebar-profile { padding: 0 1.25rem 1.25rem; border-bottom:1px solid rgba(255,255,255,0.08); }
  .sidebar-avatar {
    width:44px; height:44px; border-radius:12px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-mid));
    display:flex; align-items:center; justify-content:center;
    color:white; font-weight:700; font-size:16px; margin-bottom:0.75rem;
  }
  .sidebar-avatar.gold { background: linear-gradient(135deg, var(--gold), var(--gold-mid)); }
  .sidebar-name { font-size:14px; font-weight:600; color:white; }
  .sidebar-role { font-size:11px; color:rgba(255,255,255,0.45); margin-top:2px; }
  .sidebar-role-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10px; font-weight:600; margin-top:4px; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); }
  .sidebar-section { padding:1.25rem 1.25rem 0.5rem; font-size:10px; font-weight:700; color:rgba(255,255,255,0.3); letter-spacing:1px; text-transform:uppercase; }
  .sidebar-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 1.25rem; cursor:pointer; transition:all 0.15s;
    color:rgba(255,255,255,0.55); font-size:13.5px; font-weight:500; position:relative;
    border-left:3px solid transparent;
  }
  .sidebar-item:hover { color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.05); }
  .sidebar-item.active { color:white; background:rgba(74,173,139,0.15); border-left-color:var(--emerald-mid); }
  .sidebar-item-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:16px; }
  .sidebar-badge { margin-left:auto; background:var(--gold); color:var(--navy); font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }
  .sidebar-logout {
    margin:1rem 1.25rem 0;
    padding:10px; border-radius:var(--radius-sm);
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.5); font-size:13px; font-weight:500;
    cursor:pointer; text-align:center; transition:all 0.15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .sidebar-logout:hover { border-color:rgba(255,100,80,0.5); color:rgba(255,120,100,0.9); background:rgba(255,80,60,0.08); }
  .main-content { margin-left:240px; flex:1; padding:2rem; min-height:calc(100vh - 60px); }

  /* ===== DASHBOARD COMMON ===== */
  .page-header { margin-bottom:2rem; }
  .page-title { font-size:22px; font-weight:800; color:var(--navy); }
  .page-sub { font-size:13px; color:var(--text-muted); margin-top:3px; }
  .section-title { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:1rem; display:flex; align-items:center; gap:8px; }
  .section-title-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
  .section-title-icon.green { background:var(--emerald-light); }
  .section-title-icon.gold { background:var(--gold-light); }
  .section-title-icon.blue { background:#e8f0fe; }

  /* STAT CARDS */
  .stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:1.5rem; }
  .stat-card {
    background:white; border-radius:var(--radius); padding:1.1rem 1.25rem;
    border:1px solid var(--border-light); box-shadow:var(--shadow-sm);
    transition: transform 0.15s;
  }
  .stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .stat-label { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
  .stat-value { font-size:26px; font-weight:800; color:var(--navy); margin:4px 0 2px; line-height:1; }
  .stat-sub { font-size:11px; color:var(--text-muted); }
  .stat-dot { width:6px; height:6px; border-radius:50%; margin-right:5px; display:inline-block; }
  .stat-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; margin-top:4px; }
  .badge-green { background:var(--emerald-light); color:var(--emerald); }
  .badge-gold { background:var(--gold-light); color:var(--gold); }
  .badge-red { background:#fee; color:#c0392b; }
  .badge-blue { background:#e8f0fe; color:#1a5fb4; }
  .badge-gray { background:#f0f0f0; color:#666; }

  /* CARDS */
  .card { background:white; border-radius:var(--radius); padding:1.25rem; border:1px solid var(--border-light); box-shadow:var(--shadow-sm); margin-bottom:1.5rem; }
  .card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border-light); }
  .card-title { font-size:14px; font-weight:700; color:var(--navy); }
  .card-action { font-size:12px; color:var(--emerald); cursor:pointer; font-weight:600; }

  /* TIER CARDS */
  .tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .tier-card { border-radius:var(--radius); padding:1.25rem; border:1px solid; }
  .tier-s { background:linear-gradient(135deg,#e6f5f0,#f0faf7); border-color:rgba(26,122,94,0.2); }
  .tier-e { background:linear-gradient(135deg,#fef5e7,#fff8ee); border-color:rgba(201,146,42,0.2); }
  .tier-header { display:flex; align-items:center; gap:8px; margin-bottom:1rem; }
  .tier-badge-s { background:var(--emerald); color:white; font-size:14px; font-weight:800; padding:4px 10px; border-radius:8px; }
  .tier-badge-e { background:var(--gold); color:white; font-size:14px; font-weight:800; padding:4px 10px; border-radius:8px; }
  .tier-title { font-size:13px; font-weight:700; }
  .tier-title.s { color:var(--emerald); }
  .tier-title.e { color:var(--gold); }
  .tier-students { display:flex; flex-direction:column; gap:6px; }
  .tier-student-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.7); }
  .tier-rank { font-size:11px; font-weight:700; color:var(--text-muted); width:16px; }
  .tier-student-avatar { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; flex-shrink:0; }
  .av-s { background: linear-gradient(135deg,var(--emerald),var(--emerald-mid)); }
  .av-e { background: linear-gradient(135deg,var(--gold),var(--gold-mid)); }
  .av-b { background: linear-gradient(135deg,#4a6cdb,#7f9ef7); }
  .tier-student-name { font-size:12px; font-weight:600; color:var(--navy); flex:1; }
  .tier-student-class { font-size:10px; color:var(--text-muted); }
  .tier-student-score { font-size:12px; font-weight:700; }
  .tier-student-score.s { color:var(--emerald); }
  .tier-student-score.e { color:var(--gold); }

  /* ATTENDANCE DONUT */
  .attendance-grid { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; }
  .donut-wrap { position:relative; width:80px; height:80px; }
  .donut-wrap svg { transform:rotate(-90deg); }
  .donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
  .donut-pct { font-size:16px; font-weight:800; color:var(--navy); line-height:1; }
  .donut-lbl { font-size:9px; color:var(--text-muted); }
  .attendance-legend { display:flex; flex-direction:column; gap:5px; }
  .legend-row { display:flex; align-items:center; gap:8px; font-size:12px; }
  .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .legend-label { color:var(--text-secondary); flex:1; }
  .legend-val { font-weight:700; color:var(--navy); }
  .legend-pct { color:var(--text-muted); font-size:11px; }

  /* PROGRESS BAR */
  .progress-wrap { margin-bottom:10px; }
  .progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
  .progress-label { font-size:12px; color:var(--text-secondary); font-weight:500; }
  .progress-val { font-size:12px; font-weight:700; color:var(--navy); }
  .progress-bar { height:7px; border-radius:4px; background:var(--border-light); overflow:hidden; }
  .progress-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }
  .fill-green { background: linear-gradient(90deg,var(--emerald),var(--emerald-mid)); }
  .fill-gold { background: linear-gradient(90deg,var(--gold),var(--gold-mid)); }
  .fill-blue { background: linear-gradient(90deg,#4a6cdb,#7f9ef7); }
  .fill-red { background: linear-gradient(90deg,#e74c3c,#e57373); }

  /* TASK LIST */
  .task-list { display:flex; flex-direction:column; gap:6px; }
  .task-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-light); }
  .task-item.done { background:rgba(26,122,94,0.04); border-color:rgba(26,122,94,0.15); }
  .task-item.pending { background:rgba(231,76,60,0.03); border-color:rgba(231,76,60,0.12); }
  .task-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .task-status.done { background:var(--emerald); }
  .task-status.pending { background:#e74c3c; }
  .task-desc { font-size:12.5px; font-weight:500; flex:1; color:var(--text-primary); }
  .task-desc.done { text-decoration:line-through; color:var(--text-muted); }
  .task-date { font-size:10px; color:var(--text-muted); }
  .task-chip { font-size:10px; font-weight:600; padding:2px 8px; border-radius:6px; }
  .task-chip.done { background:var(--emerald-light); color:var(--emerald); }
  .task-chip.pending { background:#fee; color:#c0392b; }

  /* INPUT FORMS */
  .form-section { margin-bottom:1.5rem; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .input-sm { padding:8px 12px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--cream); font-family:var(--font); font-size:13px; color:var(--text-primary); outline:none; width:100%; transition:border-color 0.2s, background 0.2s; }
  .input-sm:focus { border-color:var(--emerald); background:white; }
  select.input-sm { cursor:pointer; }
  .btn-sm { padding:8px 16px; border-radius:var(--radius-sm); border:none; cursor:pointer; font-family:var(--font); font-size:13px; font-weight:600; transition:all 0.15s; }
  .btn-primary { background:var(--emerald); color:white; }
  .btn-primary:hover { background:#156b50; }
  .btn-secondary { background:var(--border-light); color:var(--text-primary); }
  .btn-secondary:hover { background:var(--border); }
  .btn-gold { background:var(--gold); color:white; }
  .btn-gold:hover { background:#b07f20; }
  .btn-danger { background:#e74c3c; color:white; }
  .btn-icon { display:inline-flex; align-items:center; gap:6px; }

  /* CLASS TABLE */
  .table-wrap { overflow-x:auto; }
  .data-table { width:100%; border-collapse:collapse; font-size:13px; }
  .data-table th { padding:9px 12px; text-align:left; background:var(--cream); font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
  .data-table td { padding:9px 12px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
  .data-table tr:last-child td { border-bottom:none; }
  .data-table tr:hover td { background:var(--cream); }
  .student-avatar-sm { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; flex-shrink:0; }

  /* QURAN HAFALAN */
  .surah-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
  .surah-item { padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:white; display:flex; align-items:center; gap:8px; cursor:pointer; transition:all 0.15s; }
  .surah-item:hover { border-color:var(--emerald); background:var(--emerald-light); }
  .surah-item.done { background:var(--emerald-light); border-color:rgba(26,122,94,0.3); }
  .surah-num { font-size:10px; font-weight:700; color:var(--text-muted); width:18px; }
  .surah-name { font-size:12px; font-weight:600; color:var(--text-primary); flex:1; }
  .surah-check { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
  .surah-item.done .surah-check { background:var(--emerald); border-color:var(--emerald); color:white; font-size:9px; }

  /* PHBI / PRESTASI */
  .event-list { display:flex; flex-direction:column; gap:8px; }
  .event-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:white; }
  .event-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .event-icon.green { background:var(--emerald-light); }
  .event-icon.gold { background:var(--gold-light); }
  .event-icon.blue { background:#e8f0fe; }
  .event-info { flex:1; }
  .event-title { font-size:13px; font-weight:600; color:var(--navy); }
  .event-date { font-size:11px; color:var(--text-muted); }
  .event-status { flex-shrink:0; }

  /* CHARACTER */
  .char-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .char-item { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:white; }
  .char-name { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
  .char-grade { font-size:20px; font-weight:800; }
  .char-grade.A { color:var(--emerald); }
  .char-grade.B { color:#4a6cdb; }
  .char-grade.C { color:var(--gold); }
  .char-grade.E { color:#e74c3c; }
  .char-desc { font-size:10px; color:var(--text-muted); }

  /* VIOLATION */
  .violation-item { padding:10px 14px; border-radius:var(--radius-sm); border-left:3px solid #e74c3c; background:#fff8f8; margin-bottom:6px; }
  .violation-title { font-size:13px; font-weight:600; color:#c0392b; }
  .violation-date { font-size:11px; color:var(--text-muted); }

  /* STUDENT DASHBOARD SPECIAL */
  .student-greeting {
    background: linear-gradient(135deg, var(--emerald), #2a9d6f);
    border-radius: var(--radius-xl); padding:1.5rem 2rem; color:white; margin-bottom:2rem;
    position:relative; overflow:hidden;
  }
  .greeting-bg { position:absolute; right:-20px; top:-20px; font-size:120px; opacity:0.08; font-family:var(--font-arabic); }
  .greeting-name { font-size:20px; font-weight:800; margin-bottom:4px; }
  .greeting-sub { font-size:13px; opacity:0.8; }
  .greeting-stats { display:flex; gap:1.5rem; margin-top:1rem; }
  .greeting-stat { }
  .greeting-stat-val { font-size:22px; font-weight:800; }
  .greeting-stat-label { font-size:11px; opacity:0.7; }

  /* PRAYER INPUT */
  .prayer-card {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-radius:var(--radius); padding:1.25rem; color:white; margin-bottom:1.5rem;
  }
  .prayer-title { font-size:14px; font-weight:700; margin-bottom:0.75rem; display:flex; align-items:center; gap:8px; }
  .prayer-times { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .prayer-btn { padding:10px; border-radius:var(--radius-sm); border:1.5px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); text-align:center; cursor:pointer; transition:all 0.15s; }
  .prayer-btn:hover, .prayer-btn.checked { background:rgba(74,173,139,0.3); border-color:var(--emerald-mid); }
  .prayer-btn-name { font-size:13px; font-weight:600; }
  .prayer-btn-time { font-size:10px; opacity:0.6; margin-top:2px; }
  .prayer-btn.checked .prayer-btn-name { color: #a8ecd1; }
  .location-info { font-size:11px; opacity:0.5; margin-top:0.75rem; display:flex; align-items:center; gap:5px; }

  /* UPLOAD EXCEL */
  .upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:2.5rem; text-align:center; background:var(--cream); cursor:pointer; transition:all 0.2s; }
  .upload-zone:hover { border-color:var(--emerald); background:var(--emerald-light); }
  .upload-icon { font-size:36px; margin-bottom:0.75rem; }
  .upload-title { font-size:15px; font-weight:700; color:var(--navy); }
  .upload-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
  .upload-btn-row { display:flex; gap:10px; justify-content:center; margin-top:1rem; }

  /* TABS */
  .tabs { display:flex; gap:4px; background:var(--border-light); border-radius:10px; padding:3px; margin-bottom:1.5rem; }
  .tab { padding:7px 16px; border-radius:8px; border:none; background:none; cursor:pointer; font-family:var(--font); font-size:13px; font-weight:500; color:var(--text-secondary); transition:all 0.2s; }
  .tab.active { background:white; color:var(--text-primary); box-shadow:var(--shadow-sm); }

  /* REPORT */
  .report-option { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:white; margin-bottom:8px; cursor:pointer; transition:all 0.15s; }
  .report-option:hover { border-color:var(--emerald); }
  .report-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
  .report-info { flex:1; }
  .report-title { font-size:13px; font-weight:700; color:var(--navy); }
  .report-desc { font-size:11px; color:var(--text-muted); }
  .report-dl { display:flex; gap:6px; }

  /* TOOLTIP */
  .tooltip { position:relative; }

  /* MOBILE RESPONSIVENESS */
  @media(max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .main-content { margin-left:0; }
    .tier-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
  }

  /* ANIMATIONS */
  @keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
  .fade-in { animation: fadeInUp 0.35s ease forwards; }
  .stagger-1 { animation-delay:0.05s; opacity:0; animation-fill-mode:forwards; }
  .stagger-2 { animation-delay:0.1s; opacity:0; animation-fill-mode:forwards; }
  .stagger-3 { animation-delay:0.15s; opacity:0; animation-fill-mode:forwards; }
  .stagger-4 { animation-delay:0.2s; opacity:0; animation-fill-mode:forwards; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:5px; height:5px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }