body { background-color: #f8fafc; color: #334155; }
        
        .page-header {
            background: white;
            padding: 40px 0;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 40px;
        }

        .btn-letter {
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 10px; font-weight: 700;
            transition: all 0.2s; border: 1px solid #e2e8f0;
            background: white; color: #64748b; margin: 4px;
            text-decoration: none !important;
        }
        .btn-letter:hover { background: #f1f5f9; color: #2563eb; transform: translateY(-2px); }
        .btn-letter.active { 
            background: #2563eb; color: white; border-color: #2563eb;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); 
        }

        .index-card { border: none; border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .list-group-item { padding: 1.2rem 1.5rem; border: none; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; }
        .list-group-item:hover { background-color: #f8fafc; padding-left: 2rem; }
        .judul-link { color: #1e293b; font-weight: 600; text-decoration: none !important; }
        .judul-link:hover { color: #2563eb; }
        .naskah-count { background: #f1f5f9; color: #475569; font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 30px; }